我有一个简单的ng-repeat循环,像这样:

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

在控制器$scope.removeTask(taskID)中有一个函数。

据我所知,Angular会先渲染视图并替换插值的{{task。Id}}和一个数字,然后,在点击事件,将计算ng-click字符串。

在这种情况下,ng-click得到的完全是预期的,即:ng-click="removeTask(5)"。然而……它什么都没做。

当然我可以写代码来获取任务。从$tasks数组甚至DOM中删除id,但这看起来不像Angular的方式。

那么,如何将动态内容添加到ng-repeat循环内的ng-click指令?


当前回答

以上答案非常棒。您可以查看下面的完整代码示例,以便确切地了解如何使用

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>

其他回答

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脚本:

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

有一件事真的让我很困扰,当我在浏览器中检查这个html时,并没有看到它扩展成这样:

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

我看到:

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

然而,后者是可行的!

这是因为你在“Angular世界”中,当你在ng-click=""里面时,Angular已经知道任务了。我就像你在模型里一样。不需要像{{}}那样使用数据绑定。

此外,如果你想传递任务对象本身,你可以喜欢:

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

这里是ng repeat with ng click函数,并使用滑块添加

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

以上答案非常棒。您可以查看下面的完整代码示例,以便确切地了解如何使用

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>

而不是

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

这样做:

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

请看这把小提琴:

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