2016-07-21 84 views
0

我正嘗試在我的應用程序中使用ui-select。 <這給我很多麻煩。我遵循了這些示例和文檔,我無法理解我在這裏做錯了什麼。ui-select f.selected is undefined

這是我的html:

<div class="form-group"> 
    <label class="control-label small">User Roles</label> 
    <ui-select multiple ng-model="vm.form.roles" ng-disabled="disabled"> 
     <ui-select-match placeholder="Select roles">{{$item}}</ui-select-match> 
     <ui-select-choices repeat="role.id as role in vm.roles | filter:$select.search"> 
      {{role.name}} 
     </ui-select-choices> 
    </ui-select> 
</div> 

這是我的控制器:

angular.module('app.ctrls') 
    .controller('UsersCtrl', UsersCtrl); 

// Injecting Dependencies 
UsersCtrl.$inject = ['$scope', '$state', '$stateParams', 'Role', 'User']; 

// Controller Function 
function UsersCtrl($scope, $state, $stateParams, $r, $u) { 
    var vm = this; 

    vm.form = {}; 
    vm.form.roles = []; 
    vm.users = []; 
    vm.roles = []; 

    vm.messageBag = []; 
    vm.errorBag = []; 

    vm.getAllRoles = function() { 
     $r.get() 
      .success(function (response, status, headers, config) { 
       vm.messageBag = response.messages; 
       vm.roles = response.data; 
       for (var i = 0; i < vm.messageBag.length; i++) { 
        $scope.createToast('success', vm.messageBag[i]); 
       } 
      }) 
      .error(function (data, status, headers, config) { 
       // Clearing Error Bag 
       vm.errorBag = []; 

       for (var prop in data) { 
        if (data.hasOwnProperty(prop)) { 
         data[prop].forEach(function (msg) { 
          if (vm.errorBag.indexOf(msg) == -1) { 
           vm.errorBag.push(msg); 
          } 
         }); 
        } 
       } 

       for (var i = 0; i < vm.errorBag.length; i++) { 
        $scope.createToast('danger', vm.errorBag[i]); 
       } 
      }); 
    }; 


    // Controller Initialiser 
    vm.init = function() { 
     // 
    }; 

    // Initialising Controller 
    vm.init(); 

} 

這是我在控制檯中看到的錯誤,每當我加載頁面:

Error: f.selected is undefined [email protected]http://admin.xxxxxx.app/scripts/lazyload/select.min.js:7:9246 anonymous/[email protected]http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js line 14544 > Function:2:258 [email protected]http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:15673:31 $RootScopeProvider/this.$gethttp://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:17216:34 $RootScopeProvider/this.$gethttp://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:17491:13 [email protected]http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:12451:25

vendors...cc0c.js (line 13647) Error: f.selected is undefined

我不知道是什麼導致了這個問題,或者如何解決這個問題。 我的angularjs版本是1.5.6 ui路由器版本是0.3.1

不知道它是否與我的代碼或與另一個插件衝突。

回答

0

看不出有什麼問題。 Tryed與UI的選擇18.1這裏重現您的問題:Reproduction也許它是$項組件(這個工作對我來說)

<ui-select multiple ng-model="ctrl.address.selected" ng-disabled="disabled"> 
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> 
<ui-select-choices repeat="person in ctrl.people | filter: $select.search"> 
    <div ng-bind-html="person.name | highlight: $select.search"></div> 
    <small> 
    email: {{person.email}} 
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> 
    </small> 
</ui-select-choices> 

基於錯誤我認爲它無法讀取vm.form.roles

0

我發現這個問題顯然你應該添加類「ui-select-choices」和「ui-select-match」,否則它將無法工作。