Question

我正在尝试使用页面中描述的方法在angularjs app中实现http://timschlechter.github.io/bootstrap-tagsinput/examples/ jquery插件。

我已经包含了这两个文件：

<script type="text/javascript" src="/viktor/public/js/tagsinput.js"></script>
<script type="text/javascript" src="/viktor/public/js/ng-tagsinput.js"></script> // I have renamed those files.

在我的app mudule load中添加了以下内容：

angular.module('app', ['ngTouch', 'bootstrap-tagsinput'])

最后添加了示例中定义的指令：

<input type="text" class="form-control" bootstrap-tagsinput>

但是我收到以下错误：

似乎在这一行

var added = scope.model.filter(function(i) {return prev.indexOf(i) === -1;}), there is no method filter.

有人有同样的问题吗？

Answer 1

有一个代码如何在页面上使用它。

<bootstrap-tagsinput
    ng-model="cities"
    typeahead-source="queryCities"
    tagclass="getTagClass"
    itemvalue="value"
    itemtext="text">
</bootstrap-tagsinput>

<script>
    angular.module('AngularExample', ['bootstrap-tagsinput'])
    .controller('CityTagsInputController',
      function CityTagsInputController($scope) {
          // Init with some cities
          $scope.cities = [
            { "value": 1, "text": "Amsterdam", "continent": "Europe" },
            { "value": 4, "text": "Washington", "continent": "America" },
            { "value": 7, "text": "Sydney", "continent": "Australia" },
            { "value": 10, "text": "Beijing", "continent": "Asia" },
            { "value": 13, "text": "Cairo", "continent": "Africa" }
          ];

          $scope.queryCities = function (query) {
              return $http.get('cities.json');
          };

          $scope.getTagClass = function (city) {
              switch (city.continent) {
                  case 'Europe': return 'badge badge-info';
                  case 'America': return 'label label-important';
                  case 'Australia': return 'badge badge-success';
                  case 'Africa': return 'label label-inverse';
                  case 'Asia': return 'badge badge-warning';
              }
          };
      }
    );
</script>

使用angularjs的bootstrap-tagsinput中的未定义方法

1 个答案: