L'ajout d'un paramètre à la fonction ng-click à l'intérieur de ng-repeat ne semble pas fonctionner

Question

J'ai une simple boucle avec ng-repeat comme ceci :

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

Il existe une fonction dans le contrôleur $scope.removeTask(taskID) .

D'après ce que je sais, Angular rendra d'abord la vue et remplacera les données interpolées par les données de la vue. {{task.id}} avec un nombre, puis, lors d'un clic, évaluera ng-click chaîne de caractères.

Dans ce cas ng-click obtient totalement ce qui est attendu, c'est-à-dire ng-click="removeTask(5)". Cependant, il ne fait rien.

Bien sûr, je peux écrire un code pour obtenir task.id de la $tasks ou même le DOM, mais cela ne semble pas être la méthode Angular.

Alors, comment ajouter du contenu dynamique à ng-click à l'intérieur d'une directive ng-repeat boucle ?

Answer 1

Au lieu de

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

faire ceci :

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

Veuillez consulter ce document :

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

Answer 2

Une chose qui m'a vraiment gêné, c'est quand j'ai inspecté ce html dans le navigateur, au lieu de le voir développé en quelque chose comme :

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

J'ai vu :

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

Cependant, cette dernière fonctionne !

C'est parce que vous êtes dans le "monde Angular", lorsqu'à l'intérieur de ng-click="" Angular est déjà au courant de task.id puisque vous êtes dans son modèle. Il n'est pas nécessaire d'utiliser la liaison de données, comme dans {{}}.

De plus, si vous voulez passer l'objet tâche lui-même, vous pouvez le faire comme :

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

Answer 3

A noter également, pour les personnes qui trouveraient cela dans leurs recherches, ce qui suit...

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

Notez la valeur de ng-click . Le paramètre transmis à goTo() est une chaîne de caractères provenant d'une propriété de l'objet de liaison (l'élément button ), mais il n'est pas entre guillemets. Il semble qu'AngularJS s'en charge pour nous. Je suis resté bloqué sur ce point pendant quelques minutes.

Answer 4

Cela fonctionne, merci. Je suis en train d'injecter du html personnalisé et de le compiler en utilisant angular dans le contrôleur.

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

Answer 5

Les réponses ci-dessus sont excellentes. Vous pouvez consulter l'exemple de code complet suivant afin de savoir exactement comment utiliser

    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="http://stackoverflow.com/">Home</a></li>
              <li><a href="http://stackoverflow.com/about/">About</a></li>
              <li><a href="http://stackoverflow.com/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="http://stackoverflow.com/qAlarm/details/">qAlarm &raquo;</a></li>
                  <li><a href="http://stackoverflow.com/YtEdit/details/">YtEdit &raquo;</a></li>
                  <li><a href="http://stackoverflow.com/GWeather/details/">GWeather &raquo;</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="http://stackoverflow.com/WadStore/details/">WadStore &raquo;</a></li>
                  <li><a href="http://stackoverflow.com/chatsAll/details/">chatsAll</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="http://stackoverflow.com/login/">Login</a></li>
              <li><a href="http://stackoverflow.com/register/">Register</a></li>
              <li><a href="http://stackoverflow.com/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="http://stackoverflow.com/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a>
                <a href="http://stackoverflow.com/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="http://stackoverflow.com/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>