2

我尝试将 ng-tags-input 与 api 控制器 .net Mvc 6 返回的 Json 列表一起使用。我的列表是在 json 中创建的，但是当尝试使用 autocompletion 显示此列表时，没有任何效果。我的自动完成列表未显示，并且我在 chrome 控制台中没有错误。

所以这是我列表中的一个对象：

[{
  "ShopID":1,
  "CompanyID":1,
  "RegionID":1,
  "Name":"Les Pieux",
  "Town":"Les Pieux",
  "Address":null,
  "ZipCode":null,
  "CreateDate":"2006-01-01T00:00:00",
  "ModificationDate":"2006-09-29T00:00:00",
  "LastModificationUserID":1,
  "PhoneNumber":null,
  "Fax":null,
  "Email":null,
  "CEmployeeShop":null
 }]

这是我在控制器中的方法：

 $scope.tokenShops = [];
 $scope.loadJsonShops = function(query)
    {
        //$scope.shops contains my list of shops in json format.
        return $scope.shops;
    }

以及 HTML 中的标签：

<div ng-controller="EmployeesCtrl">
            <tags-input ng-model="tokenShops"
                        display-property="Name"
                        Placeholder="Ajouter un magasin"
                        add-from-autocomplete-only="true">
                <auto-complete resource="loadJsonShops($query)"></auto-complete>
            </tags-input>
        </div>

这是我填充 $scope.shops 的代码

API 控制器：

public IEnumerable<Shop> Get()
{
    using (LSContext db = new LSContext())
    {
        var listShop = db.Shops.ToList();
        return listShop;
    }
}

角商店Ctrl：

function ShopsCtrl($scope, $http, $rootScope) {
function getShopsList() {
    var reqGetShops = $http({ url: 'api/Shops' });
    reqGetShops.success(function (data) {
        $scope.shops = data;
        $rootScope.$broadcast("getListShops", { list: data });
    });
}
//with api controller the list is returned in json format. I tried an another method to fill my list with an convertion that I do and it doesn't work.

angularjs EmployeeCtrl：

$scope.$on("getListShops", function (event, args) {
    $scope.shops = args.list;
    $scope.selectShop = args.list[0];
})

但我不认为我的问题来自我的 json 列表。我希望有一个人可以帮助我 。祝你今天过得愉快。

4

3 回答 3

2

我用一个指令解决了我的问题：

angular.module('TagsDirective', ['myResources', 'resourcesManagerGet', 'translateI18n'])
.directive('tags', function ($http, $q) {
    return {
        restrict: 'E',//restraint pour les éléments du dom
        template: '<tags-input ng-model="SShops" key-property="ShopID" display-property="Name" placeholder="{{\'AddShop\' | i18n}}" add-from-autocomplete-only="true"><auto-complete source="loadTags($query)"></auto-complete></tags-input>',
        scope: false,

        link: function (scope, el) {
            scope.loadTags = function (query) {
                var deferred = $q.defer();
                var reqGetShops = $http({ url: 'api/Shops/GetListShopFiltered', params: { 'query': query } });
                reqGetShops.success(function (data) {
                    deferred.resolve(data);
                });
                return deferred.promise;
            }
        }
    }
});

在 HTML 中：

<tags></tags>

g0loob ：感谢您的帮助，但现在您可以放置​​一个对象数组并使用属性 display-property 来选择要显示的文本属性。

示例： http: //mbenford.github.io/ngTagsInput/demos并使用自定义对象查看标签输入。

于 2015-10-08T15:30:14.097 回答
0

auto-completetags-input如果您没有将模板用于auto-completeor ，则需要具有至少一个名为“text”的属性的对象数组（就像） tags-input。而且您还需要过滤您的结果auto-complete才能正常工作。另请参阅此链接。

于 2015-10-07T14:28:32.577 回答
0 
angular.module('TagsDirective', ['myResources', 'resourcesManagerGet', 'translateI18n'])
.directive('tags', function ($http, $q) {
    return {
        restrict: 'E',//restraint pour les éléments du dom
        template: '<tags-input ng-model="SShops" key-property="ShopID" display-property="Name" placeholder="{{\'AddShop\' | i18n}}" add-from-autocomplete-only="true"><auto-complete source="loadTags($query)"></auto-complete></tags-input>',
        scope: false,

        link: function (scope, el) {
            scope.loadTags = function (query) {
                var deferred = $q.defer();
                var reqGetShops = $http({ url: 'api/Shops/GetListShopFiltered', params: { 'query': query } });
                reqGetShops.success(function (data) {
                    deferred.resolve(data);
                });
                return deferred.promise;
            }
        }
    }
于 2017-10-03T07:06:43.893 回答