Das Hinzufügen von Parametern zur ng-click-Funktion innerhalb von ng-repeat scheint nicht zu funktionieren

Question

Das Hinzufügen von Parametern zur ng-click-Funktion innerhalb von ng-repeat scheint nicht zu funktionieren

Gefragt el 11 de Juni, 2013: Wann wurde die Frage gestellt
486057 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe eine einfache Schleife mit ng-repeat wie diese:

   {{task.name}}
  entfernen

Es gibt eine Funktion im Controller $scope.removeTask(taskID).

Soweit ich weiß, wird Angular zuerst die Ansicht rendern und die interpolierten {{task.id}} mit einer Nummer ersetzen und dann, beim Klickereignis, den ng-click-String auswerten.

In diesem Fall erhält ng-click genau das, was erwartet wird, also: ng-click="removeTask(5)". Allerdings... es passiert nichts.

Natürlich könnte ich einen Code schreiben, um die task.id aus dem $tasks-Array oder sogar aus dem DOM zu erhalten, aber das scheint nicht der Angular-Weg zu sein.

Also, wie kann man dynamischen Inhalt zur ng-click-Direktive innerhalb einer ng-repeat-Schleife hinzufügen?

Gefragt el 11 de Juni, 2013 von Paweł Szymański

Answer 1

5 Antworten

Answer 2

757voto

Chubby Boy Punkte 30892

Statt

entfernen

machen Sie das:

entfernen

Bitte sehen Sie sich dieses Fiddle an:

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

Beantwortet el 11 de Juni, 2013 von Chubby Boy (30892 Punkte )

Answer 3

53voto

alcoholiday Punkte 719

Etwas, das mich wirklich verwirrt hat, war als ich dieses HTML im Browser inspiziert habe, anstatt es zu etwas wie diesem ausgeweitet zu sehen:

entfernen

Ich sah:

entfernen

Dennoch funktioniert letzteres!

Dies liegt daran, dass du dich in der "Angular Welt" befindest, wenn du innerhalb von ng-click="" Angular kennt task.id bereits, da du dich innerhalb seines Modells befindest. Es ist nicht nötig, die Datenbindung zu verwenden, wie in {{}}.

Weiterhin, wenn du das task-Objekt selbst übergeben möchtest, kannst du dies so machen:

entfernen

Beantwortet el 21 de Marsch, 2014 von alcoholiday (719 Punkte )

Answer 4

10voto

kevin628 Punkte 3420

Auch erwähnenswert für diejenigen, die dies in ihren Suchen finden, ist dies...

  {{ button.label }}
  {{ button.description }}

Beachten Sie den Wert von ng-click. Der an goTo() übergebene Parameter ist ein String aus einer Eigenschaft des Bindungsobjekts (des button), ist jedoch nicht in Anführungszeichen eingeschlossen. Anscheinend kümmert sich AngularJS darum. Ich habe mich daran für ein paar Minuten aufgehalten.

Beantwortet el 26 de September, 2014 von kevin628 (3420 Punkte )

Answer 5

3voto

srisanju Punkte 79

Dies funktioniert. Danke. Ich füge benutzerdefiniertes HTML ein und kompiliere es im Controller mit Angular.

 var tableContent= 'Suche: ' 
                            +'

Beantwortet el 25 de Juni, 2014 von srisanju (79 Punkte )

Answer 6

1voto

hygull Punkte 7822

Die obigen Antworten sind ausgezeichnet. Sie können sich das folgende vollständige Codebeispiel ansehen, damit Sie genau wissen, wie es verwendet wird

    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("Keine Unterstützung von 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 »</a></li>
                  <li><a href="http://stackoverflow.com/YtEdit/details/">YtEdit »</a></li>
                  <li><a href="http://stackoverflow.com/GWeather/details/">GWeather »</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="http://stackoverflow.com/WadStore/details/">WadStore »</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"> Benutzer </h1>
                </center>
            </div>
        </div>

        <div class="row" >
        <!--ITERATION DER BENUTZERLISTE-->
          <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="Bild - {{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)">LÖSCHEN</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="Registrierungs-Image" class="img-responsive img-circle" style="width: 100%">
            </a>
          </div>
        </div>
        </div>
      <!--ROW ENDS-->
  </div>

  </body>
  </html>

Beantwortet el 23 de September, 2017 von hygull (7822 Punkte )

Das Hinzufügen von Parametern zur ng-click-Funktion innerhalb von ng-repeat scheint nicht zu funktionieren

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Das Hinzufügen von Parametern zur ng-click-Funktion innerhalb von ng-repeat scheint nicht zu funktionieren

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: