Angularjs 将参数添加到ng repeat内的ng click函数不会'；好像不行

我有一个带有

ng repeat

的简单循环，如下所示：

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

{{task.name}
去除

控制器

$scope.removeTask（taskID）

中有一个函数

据我所知，Angular将首先渲染视图并用数字替换插值的

{{task.id}

，然后在单击事件时，将计算

ng click

字符串

在这种情况下，

ng click

完全得到了预期结果，即：

ng click=“removeTask（5）”。

但是。。。它什么也没做

当然，我可以编写一个代码，从

$tasks

数组甚至DOM中获取

task.id

，但这看起来不像是一种有角度的方式

那么，如何在

ng repeat

循环中向

ng click

指令添加动态内容呢

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

删除

这样做：

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

删除

请看这把小提琴：

---

有一件事让我非常不安，那就是当我在浏览器中查看这个html时，没有看到它扩展成如下内容：

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

删除

我看到：

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

删除

然而，后者是有效的

这是因为您处于“Angular World”（角度世界）中，当您在ng内部时，单击=“Angular all ready”（角度准备就绪）可以了解task.id，因为您在它的模型中。不需要像{{}那样使用数据绑定

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

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

删除

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

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

var tableContent='Search:'
+''
+“客户ID”
+“{c.CustomerId}}”；
$timeout（函数（）{
var linkingFunction=$compile（tableContent）；
var elem=链接功能（$scope）；
//然后可以像普通一样使用DOM元素。
jQuery（tablePanel）.append（elem）；
控制台日志（“超时”）；
},100);

同样值得一提的是，对于在搜索中发现这一点的人来说，这是

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

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

---

注意

ng的值，单击
。传递给
goTo（）
的参数是绑定对象（按钮
的
属性）属性中的字符串，但它没有用引号括起来。看起来AngularJS帮我们处理了。我为此挂了几分钟的电话。
以上答案非常好。您可以查看下面的完整代码示例，以便确切地知道如何使用


var-app=angular.module（'hyperCrudApp'，[]）；
app.controller（'usersCtrl'，函数（$scope，$http）{
$http.get（“https://jsonplaceholder.typicode.com/users）然后（函数（响应）{
console.log（response.data）
$scope.users=response.data；
$scope.setKey=函数（userId）{
警报（用户ID）
if（本地存储）{
setItem（“userId”，userId）
}否则{
警报（“不支持本地存储”）
返回
}
}//函数关闭
});
});
#标题{
颜色：绿色；
字体大小：粗体；
}

HyperCrud
切换导航
























使用者

{{user.name}
{{user.email}

+91{{user.phone}

{{user.address.city}

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>

这是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（'MyApp'，[]）
app.controller（'MyController'，函数（$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}
]
//默认情况下，这将隐藏DIV。
$scope.IsVisible=false；
$scope.ShowHide=函数（）{
//如果DIV是可见的，它将被隐藏，反之亦然。
$scope.IsVisible=$scope.IsVisible？false:true；
}
});
复选框1
{{emps.id}

{{emps.name}

{{emps.age}

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