关于angularjs：在ng-repeat中添加参数到ng-click功能似乎不起作用


Adding parameter to ng-click function inside ng-repeat doesn't seem to work

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

1
2
3
4
;lt;li ng-repeat='task in tasks';gt;
  ;lt;p;gt; {{task.name}}
  ;lt;button ng-click="removeTask({{task.id}})";gt;remove;lt;/button;gt;
;lt;/li;gt;

控制器$scope.removeTask(taskID)中有一个功能。

据我所知，Angular将首先渲染视图并用数字替换插值{{task.id}}，然后，在click事件中，将评估ng-click字符串。

在这种情况下，ng-click完全得到预期的结果，即：ng-click="removeTask(5)".然而......它没有做任何事情。

当然我可以编写一个代码来从$tasks数组甚至DOM中获取task.id，但这看起来不像Angular方式。

那么，如何在ng-repeat循环中向ng-click指令添加动态内容？

代替

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

做这个：

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

请看这个小提琴：

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

相关讨论

真正让我感到困惑的一件事是，当我在浏览器中检查这个HTML时，而不是看到它扩展到类似的东西：

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

我看见：

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

但是，后者有效！

这是因为你在"Angular World"中，当在ng-click ="Angular all ready就知道task.id时，因为你在它的模型中。没有必要使用数据绑定，如{{}}中所示。

此外，如果您想传递任务对象本身，您可以：

1
<button ng-click="removeTask(task)">remove</button>
相关讨论

另外值得注意的是，对于在搜索中发现这一点的人来说，这是......

1
2
  {{ button.label }}
  {{ button.description }}

注意ng-click的值。传递给goTo()的参数是来自绑定对象(button)的属性的字符串，但它不包含在引号中。看起来像AngularJS为我们处理。我挂了几分钟。

这很有效。谢谢。我正在注入自定义html并使用控制器中的angular进行编译。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        var tableContent= 'Search: <input ng-model="searchText">'
                            +''
                            +    'Customer ID'
                           + ' {{c.CustomerId}}';

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

以上答案非常好。您可以查看以下完整的代码示例，以便您可以准确地知道如何使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    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  
      });
    });
1
2
3
4
            #header{
                color: green;
                font-weight: bold;
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
  <!DOCTYPE html>
  <html>
  <head>
    HyperCrud
    <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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </head>
  <body>
    <!-- NAVBAR STARTS -->
      <nav class="navbar navbar-default navbar-fixed-top">
       
         
            <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>
            HyperCrud
         
         
            <ul class="nav navbar-nav">
              <li class="active">Home
</li>

             
<li>
About
</li>

             
<li>
Contact
</li>

              <li class="dropdown">
                Apps<span class="caret"></span>
                <ul class="dropdown-menu">
                 
<li>
qAlarm
</li>

                 
<li>
YtEdit
</li>

                 
<li>
GWeather
</li>

                  <li role="separator" class="divider">
</li>

                 
<li>
WadStore
</li>

                 
<li>
chatsAll
</li>

               
</ul>

             
</li>

           
</ul>

            <ul class="nav navbar-nav navbar-right">
             
<li>
Login
</li>

             
<li>
Register
</li>

             
<li>
Services<span class="sr-only">(current)</span>
</li>

           
</ul>

         
       
      </nav>
      <!--NAVBAR ENDS-->
 
 

 
       
           
                <center>
                        <h1 id="header"> Users
                </center>
           
       

       
        <!--ITERATING USERS LIST-->
         
           
              <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">
               
              </center>
             
                <center>
                    {{user.name}}
                    <p>
{{user.email}}
</p>
                    <p>
+91 {{user.phone}}
</p>
                    <p>
{{user.address.city}}
</p>
                   </center>
             
           
                DELETE
                UPDATE
           
           
         

       
         
           
             <img src="http://img.bhs4.com/b7/b/b7b76402439268b532e3429b3f1d1db0b28651d5_large.jpg" alt="Register Image" class="img-responsive img-circle" style="width: 100%">
           
         
       
       
      <!--ROW ENDS-->
 


  </body>
  </html>

这是ng重复点击功能和附加滑块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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;
            }
        });

</head>

<body>


<input type="checkbox" value="checkbox1" ng-click="ShowHide()" /> checkbox1

                   
                       
                         
        <p>
{{emps.id}}
</p>
        <p>
{{emps.name}}
</p>
        <p>
{{emps.age}}
</p>
       
                       


                   
                   
                        <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></button>
                        <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></button>
                   
               

<script src="https://code.jquery.com/jquery-1.12.4.min.js">
<script src="js/multislider.js">


        $('#mixedSlider').multislider({
            duration: 750,
            interval: false
        });

HTML：

1
2
3
4
5
6
7
        <!--GridStarts-->
         
              <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')">

Java脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
   //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 );
        };
     }]);