2015-09-25 93 views
2

我嘗試通過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列表我的問題。 我希望有人能幫助我。祝你今天愉快。

+0

哪裏填充$ scope.shops的代碼? –

回答

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並查看帶有自定義對象的標籤輸入。

+0

它也不起作用 –

0

auto-complete需要與一個名爲「文本」(就像tags-input),如果你不使用你的模板auto-completetags-input至少一個屬性的對象數組。而且您還需要篩選結果以便auto-complete正常工作。另請參閱此link

+0

我用ng-tag創建了一個指令,它可以工作 – JonathanTheBrosh

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