即使对象中的某些属性发生更改,标记对象也不会更改

时间:2019-02-02 10:52:27

标签: angularjs ng-tags-input

这是我的原始问题的样本,我将ng-tags-input指令与基于模板的标记一起使用。我正在使用具有布尔类型属性所有者的标签对象,如果单击“单击”按钮时将标签对象替换为tags1(所有者属性值已更改)对象,则使用该属性在标签显示名称旁边显示所有者。仍然,我看不到ng-tags-input字段中的更改仅更改了显示名称,而更改了所有者。 jsfiddle也一样。找不到我在哪里做错了

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="clickmy()">click</button>
    <tags-input ng-model="tags" 
                display-property="name" 
                placeholder="Add a country" 
                template="my-custom-template"
                template-scope="this">
    </tags-input>
    {{tags}}

    <script type="text/ng-template" id="my-custom-template">
      <div class="tag-template">
        <div>
          <img ng-src="{{data.flag}}" ng-if="data.flag" ng-click="$scope.click(data.name)"/>
        </div>
        <div>
          <span>{{$getDisplayText()}}</span>
            <span  ng-if="data.owner"> owner</span>
          <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
        </div>
      </div>
    </script>
  </body>

</html>
 $scope.tags = [
    { "name": "Brazil",owner:false, flag: "" },
    { "name": "Italy",owner:false, flag: "" },
    { "name": "Spain",owner:true, flag: "" },
    { "name": "Germany",owner:true, flag: "" },
  ];


  $scope.tags1 = [
    { "name": "rrr",owner:false, flag: "" },
    { "name": "Italy",owner:true, flag: "" },
    { "name": "Spain",owner:false, flag: "" },
    { "name": "Germany",owner:true, flag: "" },
  ];

Code on PLNKR

0 个答案:

没有答案