当前位置: 动力学知识库 > 问答 > 编程问答 >

ng tags input - how to bind ngtagsinput display property

问题描述:

What is I am trying to do ?

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>

网友答案:

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: