如果您有一个包含 ng-repeat 的指令，并且您想要修改 ng-repeat 的模型，那么如何在不在模板中创建两个单独的 ng-repeat 的情况下做到这一点？我希望能够将 ng-repeat 的模型作为指令属性传递。因此，在字符串数组的情况下，它会类似于repeat-model =“row”，而在对象数组的情况下，它会是repeat-model =“row.title”。有什么办法可以实现这一点吗？
angular.module("app", []);
angular.module("app")
.controller("appCtrl", function($scope) {
$scope.sampleData = ["sample 1", "sample 2", "sample 3"];
$scope.sampleData2 = [{title:"sample 1"}, {title:"sample 2"}, {title:"sample 3"}];
})
angular.module("app")
.directive("repeatDirective", function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: "<div ng-repeat='row in data'>{{row}}</div>",
link: function (scope) {}
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="appCtrl">
<repeat-directive data="sampleData"></repeat-directive>
</div>
</body>最佳答案
您可以向指令传递一个附加属性，描述您想要检查的属性。我在使用的指令中做了类似的事情:
<repeat-directive data="sampleData2" property="title"></repeat-directive>
<repeat-directive data="sampleData"></repeat-directive>
然后在你的指令中:
.directive("repeatDirective", function() {
return {
restrict: 'E',
scope: {
data: '=',
property: '@?'
},
template: "<div ng-repeat='row in data'>{{row | repeatDirectiveDisplay:property:useProperty}}</div>",
link: function (scope) {
scope.useProperty = !angular.isUndefined(scope.property) && scope.property != null;
}
}
})
然后你就有了一个名为 repeatDirectiveDisplay 的新过滤器，如下所示:
app.filter('repeatDirectiveDisplay', function() {
return function(item, property, useProperty) {
if (useProperty)
return item[property];
return item;
}
});
关于javascript - 修改 Angular 指令中的 ng-repeat 模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31863181/