ng-repeat에서 ng-click 함수에 매개 변수를 추가해도 작동하지 않는 것 같습니다.

386

다음과 ng-repeat같은 간단한 루프가 있습니다 .

<li ng-repeat='task in tasks'>
  <p> {{task.name}}
  <button ng-click="removeTask({{task.id}})">remove</button>
</li>

컨트롤러에 기능이 있습니다 $scope.removeTask(taskID).

내가 아는 한 Angular는 먼저 뷰를 렌더링하고 보간 {{task.id}}된 숫자로 대체 한 다음 클릭 이벤트에서 ng-click문자열 을 평가 합니다.

이 경우 ng-click완전히 예상되는 것을 얻습니다. ng-click="removeTask(5)".그러나 ... 아무것도하지 않습니다.

물론 배열이나 DOM task.id에서 가져 오는 코드를 작성할 수 는 $tasks있지만 이것은 Angular 방식처럼 보이지 않습니다.

그렇다면 루프 ng-click내 에서 지시문 에 동적 내용을 추가하는 방법은 ng-repeat무엇입니까?

angularjs ng-repeat angularjs-ng-click

— 파 웨우 스키 맨 스키
소스

742

대신에

<button ng-click="removeTask({{task.id}})">remove</button>

이 작업을 수행:

<button ng-click="removeTask(task.id)">remove</button>

이 바이올린을 참조하십시오 :

http://jsfiddle.net/JSWorld/Hp4W7/34/

— 통통한 소년
소스

1

+1 : ng-click표현식에서 대괄호를 사용하지 않는 경우에도 작동합니다.ng-click="taskData.currentTaskId = task.id"

— Andrew

고마워요 .. 많은 블로그를 보았지만 내 문제는 귀하의 솔루션으로 해결되었습니다.

— Chirag Suthar

52

실제로 나를 끊었던 한 가지는 브라우저 에서이 html을 검사했을 때와 같이 확장 된 것을 보는 것이 아니라 다음과 같습니다.

<button ng-click="removeTask(1234)">remove</button>

나는 보았다:

<button ng-click="removeTask(task.id)">remove</button>

그러나 후자는 효과가 있습니다!

이것은 ng-click = ""안에있을 때 "Angular World"에 있기 때문입니다. Angular는 모델 안에있을 때 task.id에 대해 모두 알고 있습니다. {{}}에서와 같이 데이터 바인딩을 사용할 필요가 없습니다.

또한 태스크 객체 자체를 전달하려는 경우 다음을 수행 할 수 있습니다.

<button ng-click="removeTask(task)">remove</button>

— 알코올 중독
소스

메소드가 문자열을 찾는 경우 어떻게 작동합니까?

1

@ Dinerdo는하지 않을 것입니다. "removeTask (task)"를 수행하려면 작업 객체를 가져오고 해당 객체에서 id 속성을 가져 오도록 메소드를 변경해야합니다.

— Jim Reineri

9

검색에서 이것을 찾는 사람들에게도 주목할 가치가 있습니다.

<div ng-repeat="button in buttons" class="bb-button" ng-click="goTo(button.path)">
  <div class="bb-button-label">{{ button.label }}</div>
  <div class="bb-button-description">{{ button.description }}</div>
</div>

의 값에 유의하십시오 ng-click. 전달 된 매개 변수 goTo()는 바인딩 오브젝트 ( button) 의 특성에서 가져온 문자열 이지만 따옴표로 묶지 않습니다. AngularJS가 우리를 위해 처리하는 것처럼 보입니다. 나는 몇 분 동안 그것에 매달렸다.

— kevin628
소스

3

이 작동합니다. 감사. 사용자 정의 HTML을 주입하고 컨트롤러에서 각도를 사용하여 컴파일합니다.

        var tableContent= '<div>Search: <input ng-model="searchText"></div>' 
                            +'<div class="table-heading">'
                            +    '<div class="table-col">Customer ID</div>'
                           + ' <div class="table-col" ng-click="vm.openDialog(c.CustomerId)">{{c.CustomerId}}</div>';

            $timeout(function () {
            var linkingFunction = $compile(tableContent);
            var elem = linkingFunction($scope);

            // You can then use the DOM element like normal.
            jQuery(tablePanel).append(elem);

            console.log("timeout");
        },100);

— 스리 산주
소스

1

위의 답변은 훌륭합니다. 사용 방법을 정확히 알 수 있도록 다음 전체 코드 예제를 볼 수 있습니다.

  	var app = angular.module('hyperCrudApp', []);

  	app.controller('usersCtrl', function($scope, $http) {
  	  $http.get("https://jsonplaceholder.typicode.com/users").then(function (response) {
  	  	  console.log(response.data)

  	      $scope.users = response.data;
          $scope.setKey = function (userId){
              alert(userId)
              if(localStorage){
                localStorage.setItem("userId", userId)
              } else {
                alert("No support of localStorage")
                return
              }
          }//function closed  
  	  });
  	});

    		#header{
    			color: green;
    			font-weight: bold;
    		}

  <!DOCTYPE html>
  <html>
  <head>
    <title>HyperCrud</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
   	<!-- NAVBAR STARTS -->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">HyperCrud</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="/">Home</a></li>
              <li><a href="/about/">About</a></li>
              <li><a href="/contact/">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="/qAlarm/details/">qAlarm &raquo;</a></li>
                  <li><a href="/YtEdit/details/">YtEdit &raquo;</a></li>
                  <li><a href="/GWeather/details/">GWeather &raquo;</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="/WadStore/details/">WadStore &raquo;</a></li>
                  <li><a href="/chatsAll/details/">chatsAll</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/login/">Login</a></li>
              <li><a href="/register/">Register</a></li>
              <li><a href="/services/">Services<span class="sr-only">(current)</span></a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!--NAVBAR ENDS-->
  <br>
  <br>

  <div ng-app="hyperCrudApp" ng-controller="usersCtrl" class="container">
  		<div class="row">
  			<div class="col-sm-12 col-md-12">
  				<center>
  						<h1 id="header"> Users </h1>
  				</center>
  			</div>
  		</div>

  		<div class="row" >
        <!--ITERATING USERS LIST-->
  		  <div class="col-sm-6 col-md-4" ng-repeat="user in users">
  		    <div class="thumbnail">
  		      <center>
  		      	<img src="https://cdn2.iconfinder.com/data/icons/users-2/512/User_1-512.png" alt="Image - {{user.name}}" class="img-responsive img-circle" style="width: 100px">
  		      	<hr>
  		      </center>
  		      <div class="caption">
  		      	<center>
  			        <h3>{{user.name}}</h3>
  			        <p>{{user.email}}</p>
  			        <p>+91 {{user.phone}}</p>
  			        <p>{{user.address.city}}</p>
  			       </center>
  		      </div>
            <div class="caption">
                <a href="/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a>
                <a href="/users/update/{{user.id}}/" role="button" class="btn btn-success btn-block" ng-click="setKey(user.id)">UPDATE</a>
            </div>
  		    </div>
  		  </div>

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <a href="/regiser/">
             <img src="http://img.bhs4.com/b7/b/b7b76402439268b532e3429b3f1d1db0b28651d5_large.jpg" alt="Register Image" class="img-responsive img-circle" style="width: 100%">
            </a>
          </div>
        </div>
  		</div>
      <!--ROW ENDS-->
  </div>


  </body>
  </html>

스 니펫 확장

— 갈매기
소스

0

HTML :

<div  ng-repeat="scannedDevice in ScanResult">
        <!--GridStarts-->
          <div >
              <img ng-src={{'./assets/img/PlaceHolder/Test.png'}} 
                   <!--Pass Param-->
                   ng-click="connectDevice(scannedDevice.id)"
                   altSrc="{{'./assets/img/PlaceHolder/user_place_holder.png'}}" 
                   onerror="this.src = $(this).attr('altSrc')">
           </div>    
 </div>

자바 스크립트 :

   //Global Variables
    var  ANGULAR_APP = angular.module('TestApp',[]);

    ANGULAR_APP .controller('TestCtrl',['$scope', function($scope) {

      //Variables
      $scope.ScanResult = [];

      //Pass Parameter
      $scope.connectDevice = function(deviceID) {
            alert("Connecting : "+deviceID );
        };
     }]);

— 히 테쉬 사후
소스

0

다음은 ng 클릭 기능으로 슬라이더를 추가하는 ng 반복입니다.

<script>
var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
        $scope.employees = [
            { 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
            { 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
            { 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
            { 'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 },
            { 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
        ]

            //This will hide the DIV by default.
                $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });
</script>
</head>

<body>

<div class="container" ng-app="MyApp" ng-controller="MyController">
<input type="checkbox" value="checkbox1" ng-click="ShowHide()" /> checkbox1
<div id="mixedSlider">
                    <div class="MS-content">
                        <div class="item"  ng-repeat="emps in employees"  ng-show = "IsVisible">
                          <div class="subitem">
        <p>{{emps.id}}</p>
        <p>{{emps.name}}</p>
        <p>{{emps.age}}</p>
        </div>
                        </div>


                    </div>
                    <div class="MS-controls">
                        <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
                        <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
                    </div>
                </div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="js/multislider.js"></script> 
<script>

        $('#mixedSlider').multislider({
            duration: 750,
            interval: false
        });
</script>

— 안쿠시
소스