Dodanie parametru do ng kliknij funkcja wewnątrz NG-repeat nie wydają się działać

352

Mam prostą pętlę z ng-repeat tak:Dodanie parametru do ng kliknij funkcja wewnątrz NG-repeat nie wydają się działać

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

Istnieje funkcja w sterowniku $scope.removeTask(taskID).

Z tego co wiem, Angular najpierw wyrenderuje widok i zastąpi interpolowany numer {{task.id}}, a następnie, po kliknięciu, oceni ciąg znaków ng-click.

W tym przypadku ng-click dostaje całkowicie to, czego się oczekuje, czyli: ng-click="removeTask(5)". Jednak ... nic nie robi.

Oczywiście mogę napisać kod, aby uzyskać task.id z tablicy $tasks lub nawet DOM, ale nie wydaje się to być metodą kątową.

Jak dodać dynamiczną treść do dyrektywy ng-click wewnątrz pętli ng-repeat?

Źródło

2013-06-11 Paweł Szymański

678

Zamiast

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

to zrobić:

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

Proszę zobaczyć ten skrzypce:

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

Źródło

2013-06-11 08:49:39

+ 1: działa to również, jeśli wyrażenie 'ng-click' nie używa nawiasów, np.' Ng-click = "taskDa ta.currentTaskId = task.id "' – Andrew

Dzięki Sir .. Widziałem wiele blogów, ale mój problem został rozwiązany przez twoje rozwiązanie. –

Potrzebujesz więcej niż jednego głosu, oszczędzasz mnie;) –

Jedną rzeczą, która naprawdę wisiał mnie, kiedy ja kontrolowane tego html w przeglądarce, zamiast widzieć go rozszerzonego do czegoś takiego jak:

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

widziałem:

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

Jednakże ten ostatni działa!

Dzieje się tak dlatego, że znajdujesz się w "Angular World", gdy wewnątrz ng-click = "" Angular all ready wie o task.id tak jak w swoim modelu. Nie ma potrzeby używania powiązania danych, tak jak w {{}}.

Ponadto, jeśli chce przekazać sam obiekt zadania można lubię:

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

Źródło

2014-03-21 19:45:59 alcoholiday

Jak by to działało, gdyby twoja metoda szukała ciągu znaków? –

@ Dinerdo to nie będzie. aby wykonać polecenie "removeTask (task)", musisz zmienić metodę, aby oczekiwać otrzymania obiektu zadania i pobrać właściwość id z tego obiektu. –

Czy możesz również pokazać JavaScript? –

to działa. dzięki. Wprowadzam niestandardowy html i kompiluję go za pomocą kąta w kontrolerze.

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

Źródło

2014-06-25 13:06:28 srisanju

Warto również zauważyć, dla ludzi, którzy znajdują się w ich poszukiwań to jest to ...

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

Uwaga wartość ng-click. Parametr przekazywany do goTo() jest ciągiem z właściwości obiektu wiążącego (button), ale nie jest zawijany w cudzysłowy. Wygląda na to, że AngularJS obsługuje to za nas. Odkładałem słuchawkę na kilka minut.

Źródło

2014-09-26 04:27:07 kevin628

Powyższe odpowiedzi są doskonałe.Możesz zajrzeć na poniższym pełny przykład kodu, dzięki czemu można dokładnie wiedzieć, jak korzystać

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

Źródło

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

Źródło

2017-10-11 11:45:09

Dodanie parametru do ng kliknij funkcja wewnątrz NG-repeat nie wydają się działać

Odpowiedz

Powiązane problemy