Question

我想做什么？

＆＃13;

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" },
  ];
});

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

我正在尝试将ng-tagsinput的display-property绑定到displayProperty模型。它只是第一次工作。如果我更改displayProperty，我没有看到更新。如何绑定display-property，以便无论何时更改，都可以使用ng-tags-input来考虑更改。

另一个问题 - 如何使用＆＃34; text＆＃34; ngTagsInput中的属性？

Answer 1

＆＃13;

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" },
  ];
});

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

如何绑定ngtagsinput显示属性

1 个答案: