javascript - 带有动态模型的 ng-tags-input

Question

当每个元素都有不同的标签时，我如何在 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'];
    });

提前致谢！

Answer 1

您可以使用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'];

参见 plunker 示例

Answer 2

我有与 Claies 建议的相同的解决方案，但我尝试了自己。请检查工作示例：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'}]  
    }  
  ];
});