Aggiunta parametro ng clic funzione all'interno ng-repeat non sembra funzionare

352

Ho un semplice ciclo con ng-repeat come questo:Aggiunta parametro ng clic funzione all'interno ng-repeat non sembra funzionare

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

C'è una funzione del controller $scope.removeTask(taskID).

Per quanto ne so, Angular per prima cosa renderizza la vista e sostituisce interpolato {{task.id}} con un numero, e quindi, all'evento click, valuterà la stringa ng-click.

In questo caso ng-click ottiene totalmente ciò che è previsto, vale a dire: ng-click="removeTask(5)". Tuttavia ... non sta facendo nulla.

Naturalmente posso scrivere un codice per ottenere task.id dall'array $tasks o anche dal DOM, ma questo non sembra il modo angolare.

Quindi, come è possibile aggiungere un contenuto dinamico alla direttiva ng-click all'interno di un ciclo ng-repeat?

fonte

2013-06-11 Paweł Szymański

678

Invece di

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

fare questo:

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

Si prega di vedere questo violino:

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

fonte

2013-06-11 08:49:39

+ 1: funziona anche se l'espressione 'ng-click' non usa parentesi, ovvero' ng-click = "taskDa ta.currentTaskId = task.id "' – Andrew

Grazie Sir .. Ho visto un sacco di blog ma il mio problema è stato risolto dalla tua soluzione. –

Hai bisogno di più di un voto, mi salvi;) –

Una cosa che veramente mi ha riattaccato, è stato quando ho controllato questo html nel browser, invece di vederlo espanso in qualcosa di simile:

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

vidi:

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

Tuttavia, queste ultime opere!

Questo perché sei nel "Mondo angolare", quando dentro ng-click = "" Tutto pronto angolare sa di task.id come sei dentro il suo modello. Non è necessario utilizzare l'associazione dati, come in {{}}.

Inoltre, se si voleva passare l'oggetto compito stesso, è possibile, come:

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

fonte

2014-03-21 19:45:59 alcoholiday

Come funziona se il tuo metodo cerca una stringa? –

@Dinerdo non lo farebbe. per fare "removeTask (task)" dovresti cambiare il metodo per aspettarti di ottenere un oggetto task e ottenere la proprietà id da quell'oggetto. –

puoi mostrare anche il codice JavaScript? –

questo funziona. Grazie. Sto iniettando html personalizzato e lo compilo usando angolare nel controller.

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

fonte

2014-06-25 13:06:28 srisanju

Vale anche la pena notare, per le persone che trovano questo nelle loro ricerche, è questo ...

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

nota il valore di ng-click. Il parametro passato a goTo() è una stringa da una proprietà dell'oggetto vincolante (button), ma non è racchiusa tra virgolette. Sembra che AngularJS gestisca quello per noi. Sono rimasto bloccato per alcuni minuti.

fonte

2014-09-26 04:27:07 kevin628

Le risposte sopra sono eccellenti.Potete guardare il seguente esempio di codice completo in modo che si possa sapere esattamente come utilizzare

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

fonte

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

fonte

2017-10-11 11:45:09

Aggiunta parametro ng clic funzione all'interno ng-repeat non sembra funzionare

risposta

Problemi correlati