带有动态模型的 ng-tags-input
ng-tags-input with dynamic model
当每个元素都有不同的标签时,如何在 ng-repeat 循环中使用 ng-tags-input?如何动态设置 ng-model?
<div ng-controller="myController">
<ul>
<li ng-repeat="file in files">
{{file}} <tags-input ng-model="tags"></tags-input>
</li>
</ul>
</div>
app.controller('myController', function ($scope) {
$scope.tags = ['tagA','tagB'];
// $scope.tags['file1'] = ['tagA','tagB'];
// $scope.tags['file2'] = ['tagC','tagD'];
});
提前致谢!
您可以使用 ng-model
来组成更复杂的表达式,例如 tags[file]
,假设 file
是与您字典中的键对应的字符串。
<div ng-controller="myController">
<ul>
<li ng-repeat="file in files">
{{file}} <tags-input ng-model="tags[file]"></tags-input>
</li>
</ul>
</div>
$scope.tags = {
'first': [{text: 'Tag1'}, {text: 'Tag2'}],
'second': [{text: 'Tag3'}, {text: 'Tag4'}]
};
$scope.files = ['first', 'second'];
我有与克莱斯建议的相同的解决方案,但我自己尝试了。
请检查工作示例:http://plnkr.co/edit/bNQ6DrUlNWdEAi8fnvBr?p=preview
HTML
<ul>
<li ng-repeat="file in files">
{{file.name}}
<tags-input ng-model="file.tags"></tags-input>
</li>
</ul>
控制器
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.files = [
{
name : 'file1','tags': [{text: 'tagA'},{text: 'tagB'}]
},
{
name : 'file2','tags': [{text: 'tagC'},{text: 'tagD'}]
}
];
});
当每个元素都有不同的标签时,如何在 ng-repeat 循环中使用 ng-tags-input?如何动态设置 ng-model?
<div ng-controller="myController">
<ul>
<li ng-repeat="file in files">
{{file}} <tags-input ng-model="tags"></tags-input>
</li>
</ul>
</div>
app.controller('myController', function ($scope) {
$scope.tags = ['tagA','tagB'];
// $scope.tags['file1'] = ['tagA','tagB'];
// $scope.tags['file2'] = ['tagC','tagD'];
});
提前致谢!
您可以使用 ng-model
来组成更复杂的表达式,例如 tags[file]
,假设 file
是与您字典中的键对应的字符串。
<div ng-controller="myController">
<ul>
<li ng-repeat="file in files">
{{file}} <tags-input ng-model="tags[file]"></tags-input>
</li>
</ul>
</div>
$scope.tags = {
'first': [{text: 'Tag1'}, {text: 'Tag2'}],
'second': [{text: 'Tag3'}, {text: 'Tag4'}]
};
$scope.files = ['first', 'second'];
我有与克莱斯建议的相同的解决方案,但我自己尝试了。 请检查工作示例:http://plnkr.co/edit/bNQ6DrUlNWdEAi8fnvBr?p=preview
HTML
<ul>
<li ng-repeat="file in files">
{{file.name}}
<tags-input ng-model="file.tags"></tags-input>
</li>
</ul>
控制器
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.files = [
{
name : 'file1','tags': [{text: 'tagA'},{text: 'tagB'}]
},
{
name : 'file2','tags': [{text: 'tagC'},{text: 'tagD'}]
}
];
});