Thêm tham số để ng-bấm chức năng bên trong ng-repeat dường như không làm việc

352

Tôi có một vòng lặp đơn giản với ng-repeat như thế này:Thêm tham số để ng-bấm chức năng bên trong ng-repeat dường như không làm việc

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

Có một chức năng trong bộ điều khiển $scope.removeTask(taskID).

Theo tôi biết, Góc nhìn đầu tiên sẽ hiển thị chế độ xem và thay thế nội suy {{task.id}} bằng một số và sau đó, trên sự kiện nhấp chuột, sẽ đánh giá chuỗi ng-click.

Trong trường hợp này, ng-click hoàn toàn được mong đợi, nghĩa là: ng-click="removeTask(5)". Tuy nhiên ... nó không làm gì cả.

Tất nhiên tôi có thể viết mã để lấy task.id từ mảng $tasks hoặc thậm chí DOM, nhưng điều này dường như không phải là cách Góc.

Vậy, làm cách nào để thêm nội dung động vào ng-click chỉ thị bên trong vòng lặp ng-repeat?

Nguồn

2013-06-11 Paweł Szymański

678

Thay vì

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

làm điều này:

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

Xin xem fiddle này:

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

Nguồn

2013-06-11 08:49:39

+ 1: điều này cũng hoạt động nếu biểu thức 'ng-click' của bạn không sử dụng dấu ngoặc vuông, nghĩa là' ng-click = "taskDa ta.currentTaskId = task.id "' – Andrew

Cảm ơn Ngài .. Tôi đã thấy rất nhiều blog nhưng vấn đề của tôi được giải quyết bằng giải pháp của bạn. –

Cần nhiều hơn một phiếu bầu, bạn sẽ tiết kiệm cho tôi;) –

Một điều mà thực sự treo tôi lên, được khi tôi kiểm tra này html trong trình duyệt, thay vì nhìn thấy nó mở rộng đến một cái gì đó như:

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

tôi thấy:

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

Tuy nhiên, các tác phẩm sau này!

Điều này là do bạn đang ở trong "Thế giới góc", khi bên trong ng-click = "" Góc tất cả đã sẵn sàng biết về task.id khi bạn ở bên trong mô hình của nó. Không cần sử dụng Ràng buộc dữ liệu, như trong {{}}.

Hơn nữa, nếu bạn muốn vượt qua các đối tượng nhiệm vụ riêng của mình, bạn có thể thích:

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

Nguồn

2014-03-21 19:45:59 alcoholiday

Làm thế nào điều này sẽ hoạt động nếu phương pháp của bạn đang tìm kiếm một chuỗi? –

@Dinerdo nó sẽ không. để làm "removeTask (nhiệm vụ)", bạn sẽ phải thay đổi phương thức để mong đợi nhận một đối tượng nhiệm vụ và lấy thuộc tính id từ đối tượng đó. –

bạn cũng có thể hiển thị mã JavaScript không? –

công trình này. cảm ơn. Tôi đang tiêm html tùy chỉnh và biên dịch nó bằng cách sử dụng góc trong bộ điều khiển.

 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);

Nguồn

2014-06-25 13:06:28 srisanju

Cũng đáng chú ý, đối với những người tìm thấy điều này trong tìm kiếm của họ, là thế này ...

<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>

Lưu ý giá trị của ng-click. Tham số được chuyển đến goTo() là một chuỗi từ một thuộc tính của đối tượng liên kết (button), nhưng nó không được bao bọc trong dấu ngoặc kép. Có vẻ như AngularJS xử lý điều đó cho chúng tôi. Tôi bị cúp máy trong vài phút.

Nguồn

2014-09-26 04:27:07 kevin628

Câu trả lời trên tuyệt vời.Bạn có thể nhìn vào toàn bộ mã ví dụ sau đây để bạn biết chính xác có thể biết cách sử dụng

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

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

 
    \t  $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 
 
    \t }); 
 
    \t });

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

<!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> 
 
    \t <!-- 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"> 
 
    \t \t <div class="row"> 
 
    \t \t \t <div class="col-sm-12 col-md-12"> 
 
    \t \t \t \t <center> 
 
    \t \t \t \t \t \t <h1 id="header"> Users </h1> 
 
    \t \t \t \t </center> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 

 
    \t \t <div class="row" > 
 
     <!--ITERATING USERS LIST--> 
 
    \t \t <div class="col-sm-6 col-md-4" ng-repeat="user in users"> 
 
    \t \t  <div class="thumbnail"> 
 
    \t \t  <center> 
 
    \t \t  \t <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"> 
 
    \t \t  \t <hr> 
 
    \t \t  </center> 
 
    \t \t  <div class="caption"> 
 
    \t \t  \t <center> 
 
    \t \t \t   <h3>{{user.name}}</h3> 
 
    \t \t \t   <p>{{user.email}}</p> 
 
    \t \t \t   <p>+91 {{user.phone}}</p> 
 
    \t \t \t   <p>{{user.address.city}}</p> 
 
    \t \t \t  </center> 
 
    \t \t  </div> 
 
      <div class="caption"> 
 
       <a href="https://stackoverflow.com/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a> 
 
       <a href="https://stackoverflow.com/users/update/{{user.id}}/" role="button" class="btn btn-success btn-block" ng-click="setKey(user.id)">UPDATE</a> 
 
      </div> 
 
    \t \t  </div> 
 
    \t \t </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> 
 
    \t \t </div> 
 
     <!--ROW ENDS--> 
 
    </div> 
 

 

 
    </body> 
 
    </html>

Nguồn

2017-09-23 09:05:39

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>

Java Script:

//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); 
     }; 
    }]);

Nguồn

2017-10-11 11:45:09

Thêm tham số để ng-bấm chức năng bên trong ng-repeat dường như không làm việc

Trả lời

Các vấn đề liên quan