Question

例如，我有一些ng-repeat默认行没有删除按钮，我想添加可以删除的新行。删除功能在添加的行中不起作用。我知道我可以通过使用指令和$ compile解决这个问题，但我不明白如何使用ng-repeat。

HTML

<body ng-app="TestApp" ng-controller="Test">
  <ul>
    <li ng-repeat="o in array">
      <div id="name">{{ o.name }}</div>
      <div id="remove" ng-bind-html="o.remove"></div>
    </li>
  </ul>
  <fieldset>
    <input ng-model="inputname">
    <button ng-click="addRow(inputname)">Add row</button>
  </fieldset>
</body>

JS

  angular.module('TestApp', []).controller("Test", function($scope, $sce) {
     $scope.array = [{name: "Test1"},{name: "Test2"},{name: "Test3"},{name: "Test4"}]

     $scope.addRow = function(name){
      var a = { name: name,
      remove: $sce.trustAsHtml("<button ng-click='removeRow($index)' </button>")
    }
     $scope.array.push(a)}
     $scope.remove = function(index) {
      $scope.array.splice(index, 1)}
    })

以下是http://plnkr.co/edit/0WFmvT?p=preview

的示例

Answer 1

结帐此链接，Using ng-bind-html and $sce.trustAsHtml create a string with ng-model binding添加了一个编译模板指令，更新了plnkr：http://plnkr.co/edit/veKAGjXoJ7DKeC233wbj?p=preview

在HTML中：

date

在JS中：

row

将trustAsHtml与指令一起推送到ng-repeat

HTML

JS

1 个答案: