ng-tags-input自动完成不显示

我尝试通过api控制器使用ng-tags-input与返回的Json列表.net Mvc 6.我的列表是在json中创建的，但是当尝试显示带有自动完成，没有任何工作。我的自动完成列表未显示，并且在Chrome控制台中没有错误。ng-tags-input自动完成不显示

所以这是我名单的对象：

[{ 
    "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

阿比控制器：

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

角shopCtrl：

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列表我的问题。我希望有人能帮助我。祝你今天愉快。

来源

2015-09-25 JonathanTheBrosh

哪里填充$ scope.shops的代码？ –

我解决我的问题有一个指令：

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-08 15:30:14 JonathanTheBrosh

它也不起作用 –

auto-complete需要与一个名为“文本”（就像tags-input），如果你不使用你的模板auto-complete或tags-input至少一个属性的对象数组。而且您还需要筛选结果以便auto-complete正常工作。另请参阅此link。

来源

2015-10-07 14:28:32

我用ng-tag创建了一个指令，它可以工作 – JonathanTheBrosh

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-03 07:06:43

ng-tags-input自动完成不显示

回答

相关问题