在ng-repeat中为ng-click函数添加参数似乎不起作用

我有一个简单的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指令?

当前回答

这个作品。谢谢。我正在注入自定义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);

2014-06-25 13:06:28

其他回答

有一件事真的让我很困扰，当我在浏览器中检查这个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>

2014-03-21 19:45:59

而不是

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

这样做:

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

请看这把小提琴:

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

2013-06-11 08:49:39

这里是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>

2018-06-12 19:05:13

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

2017-09-23 09:05:39

这个作品。谢谢。我正在注入自定义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);

2014-06-25 13:06:28

在ng-repeat中为ng-click函数添加参数似乎不起作用

推荐文章

最新文章

标签