问如何绑定ngtagsinput显示属性
EN

Stack Overflow用户

提问于 2015-12-04 05:53:52

回答 1查看 1.8K关注 0票数 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的显示属性绑定到displayProperty模型。这只是第一次起作用。如果我更改了displayProperty，我看不到更新。如何绑定display-property，以便无论何时发生变化，ng-tags-input都会考虑这种变化。

另一个问题--如何在ngTagsInput中使用"text“属性？

ng-tags-input

回答 1

Stack Overflow用户

发布于 2016-08-10 15:47:54

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34076945

复制

相似问题

问如何绑定ngtagsinput显示属性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何绑定ngtagsinput显示属性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何绑定ngtagsinput显示属性
EN