Question

我试图创建标签。当用户尝试根据数组中的类型值键入特定字符时，我需要根据类型值显示预先输入的下拉列表。

当我点击下拉列表中的值时，我想调用一个函数。

    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css"/>

<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

<tags-input ng-model="model.invoiceSelectedAccount" 
                placeholder="Add Account" 
                replace-spaces-with-dashes="false" add-from-autocomplete-only="true" class="form-row29" display-property="shortname" style="height: 50px;background-color: transparent;" ng-change="getRolesOfSelectedAccount(model.invoiceSelectedAccount)">
      <auto-complete source="invoiceSingleSelectionaccountlist"></auto-complete>
    </tags-input>    

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

app.controller('MainCtrl', function($scope, $http) {

    $scope.invoiceSingleSelectionaccountlist = [{"groupcode":"PROMNG","shortname":"HANDY BUDDY"},{"groupcode":"FMDEMO","shortname":"FMDEMO"},{"groupcode":"SRTEST","shortname":"SR Test"},{"groupcode":"HBDEMO","shortname":"Proang"},{"groupcode":"INFOST","shortname":"INFOSOFT"}];

});

我能够从所选值列出并形成标签。但是当从下拉列表中选择值时无法调用函数。

Answer 1

在on-tag-added="onTagAdded($tag)"元素

中添加内置的<tags-input>方法调用

并且key-property="groupcode"用于唯一身份识别。

HTML：

<tags-input ng-model="model.invoiceSelectedAccount"  on-tag-added="onTagAdded($tag)"  key-property="groupcode" placeholder="Add Account"   replace-spaces-with-dashes="false" add-from-autocomplete-only="true" class="form-row29" display-property="shortname" style="height: 50px;background-color: transparent;" ng-change="getRolesOfSelectedAccount(model.invoiceSelectedAccount)">
  <auto-complete source="invoiceSingleSelectionaccountlist"></auto-complete>
</tags-input>

控制器：

$scope.onTagAdded = function($tag) {
   alert(JSON.stringify($tag));
   //your logic 
   }

在这里检查plunker：https://plnkr.co/edit/7VNFHu?p=preview

如何在ngTagsInput中调用函数 - AngularJS

1 个答案: