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

386

Ich habe eine einfache Schleife mit folgendem ng-repeat:

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

Es gibt eine Funktion in der Steuerung $scope.removeTask(taskID).

Soweit ich weiß, wird Angular zuerst die Ansicht rendern und interpoliert {{task.id}}durch eine Zahl ersetzen und dann beim Klickereignis die ng-clickZeichenfolge auswerten .

In diesem Fall ng-clickwird genau das erwartet, was erwartet wird, dh:ng-click="removeTask(5)". Es tut jedoch nichts.

Natürlich kann ich einen Code schreiben, um task.idvon der zu bekommen$tasks Array oder sogar vom DOM zu kommen, aber dies scheint nicht der Angular-Weg zu sein.

Wie kann man also ng-clickDirektiven innerhalb einer ng-repeatSchleife dynamischen Inhalt hinzufügen ?

angularjs  ng-repeat  angularjs-ng-click 
— Paweł Szymański
quelle

Antworten:

742

Anstatt 

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

mach das:

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

Bitte sehen Sie diese Geige:

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

— Molliger Junge
quelle
1
+1: Dies funktioniert auch, wenn Ihr ng-clickAusdruck keine Klammern verwendet, dhng-click="taskData.currentTaskId = task.id"
— Andrew
Vielen Dank, Sir. Ich habe viele Blogs gesehen, aber mein Problem wird durch Ihre Lösung gelöst.
— Chirag Suthar
52

Eine Sache, die mich wirklich aufgehängt hat, war, als ich dieses HTML im Browser inspizierte, anstatt zu sehen, dass es auf etwas erweitert wurde wie:

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

Ich sah:

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

Letzteres funktioniert jedoch!

Dies liegt daran, dass Sie sich in der "Winkelwelt" befinden, wenn Sie sich in ng-click = "" befinden. Angular weiß alles über task.id, während Sie sich in seinem Modell befinden. Es ist nicht erforderlich, die Datenbindung wie in {{}} zu verwenden.

Wenn Sie das Aufgabenobjekt selbst übergeben möchten, können Sie Folgendes tun:

<button ng-click="removeTask(task)">remove</button>
— Alkoholurlaub
quelle
Wie würde dies funktionieren, wenn Ihre Methode nach einer Zeichenfolge sucht?
1
@Dinerdo würde es nicht. Um "removeTask (task)" auszuführen, müssten Sie die Methode ändern, um zu erwarten, dass ein Task-Objekt und die id-Eigenschaft von diesem Objekt abgerufen werden.
— Jim Reineri
9

Bemerkenswert für Leute, die dies bei ihrer Suche finden, ist dies ...

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

Beachten Sie den Wert von ng-click. Der übergebene Parameter goTo()ist eine Zeichenfolge aus einer Eigenschaft des Bindungsobjekts (the button), wird jedoch nicht in Anführungszeichen gesetzt. Sieht so aus, als würde AngularJS das für uns erledigen. Daran habe ich mich ein paar Minuten lang aufgehängt.

— kevin628
quelle
3

das funktioniert. Vielen Dank. Ich injiziere benutzerdefiniertes HTML und kompiliere es mit Angular im 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);
— srisanju
quelle
1

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

  	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="/">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">
  		<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="/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a>
                <a href="/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="/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>
Erweitern Sie das Snippet

— Hygull
quelle
0

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 );
        };
     }]);
— Hitesh Sahu
quelle
0

Hier ist die ng-Wiederholung mit ng-Klick-Funktion und zum Anhängen mit dem Schieberegler

<script>
var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
        $scope.employees = [
            { 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
            { 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
            { 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
            { 'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 },
            { 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
        ]

            //This will hide the DIV by default.
                $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });
</script>
</head>

<body>

<div class="container" ng-app="MyApp" ng-controller="MyController">
<input type="checkbox" value="checkbox1" ng-click="ShowHide()" /> checkbox1
<div id="mixedSlider">
                    <div class="MS-content">
                        <div class="item"  ng-repeat="emps in employees"  ng-show = "IsVisible">
                          <div class="subitem">
        <p>{{emps.id}}</p>
        <p>{{emps.name}}</p>
        <p>{{emps.age}}</p>
        </div>
                        </div>


                    </div>
                    <div class="MS-controls">
                        <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
                        <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
                    </div>
                </div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="js/multislider.js"></script> 
<script>

        $('#mixedSlider').multislider({
            duration: 750,
            interval: false
        });
</script>
— Ankush
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.