JonathanTheBrosh JonathanTheBrosh - 1 year ago 129
AngularJS Question

ng-tags-input autocomplete is not displayed

I try to use ng-tags-input with a returned Json list by an api controller .net Mvc 6. My list is created in json but when try to display this list with the autocompletion , nothing works. My autocomplete list isn't displayed and I don't have error in chrome console.

So this is an object of my list :

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


This is my method in my controller:

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


And the tag in 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>


This is my code that populates $scope.shops

Api Controller:

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


angular 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];
})


But I don't think that my problem from my json list.
I hope someone can help me . Have a nice day.

Answer Source

I resolve my problem with a directive:

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;
            }
        }
    }
});

and in Html:

<tags></tags>

g0loob : thanks for your help, but now you can put an array of objects and use the attribute display-property to choose the text property to display.

example:http://mbenford.github.io/ngTagsInput/demos and look the tags input with custom object.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download