2

我想做什么？

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
    { "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
    { "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
    { "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
  ];
});
.tag-template div:first-child {
  float: left;
}

.tag-template div:first-child img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.tag-template div:last-child {
  float: left;
  margin-left: 5px;
}
<!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">
    <input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
    <tags-input ng-model="tags" 
                display-property="{{displayProperty}}" 
                placeholder="Add a country" 
                template="my-custom-template">
    </tags-input>
    
    {{displayProperty}}
    
    <script type="text/ng-template" id="my-custom-template">
      <div class="tag-template">
        <div>
          <img ng-src="{{data.flag}}" ng-if="data.flag"/>
        </div>
        <div>
          <span>{{$getDisplayText()}}</span>
          <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
        </div>
      </div>
    </script>
  </body>

</html>

我正在尝试将 ng-tagsinput 的 display-property 绑定到 displayProperty 模型。它只是第一次工作。如果我更改 displayProperty，我看不到更新。如何绑定 display-property 以便每当它更改时，ng-tags-input 都会考虑更改。

另一个问题 - 如何在 ngTagsInput 中使用“文本”属性？

4

1 回答 1

0 

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
    { "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
    { "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
    { "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
  ];
});
.tag-template div:first-child {
  float: left;
}

.tag-template div:first-child img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.tag-template div:last-child {
  float: left;
  margin-left: 5px;
}
<!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">
    <input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
    <tags-input ng-model="tags" 
                key-property="name"
                display-property="flag" 
                placeholder="Add a country" 
                template="my-custom-template">
    </tags-input>
    
    {{displayProperty}}
    
    <script type="text/ng-template" id="my-custom-template">
      <div class="tag-template">
        <div>
          <img ng-src="{{data.flag}}" ng-if="data.flag"/>
        </div>
        <div>
          <span>{{$getDisplayText()}}</span>
          <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
        </div>
      </div>
    </script>
  </body>

</html>

于 2016-08-10T07:47:54.410 回答