ui-select f.selected is undefined

Question

Я пытаюсь выполнить ui-select в своем приложении>. < Это приносит мне много неприятностей. Я следил за примерами и документами, и я не могу понять, что я делаю неправильно здесь.

Это мой 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 f.getPlaceholder@http://admin.xxxxxx.app/scripts/lazyload/select.min.js:7:9246 anonymous/fn@http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js line 14544 > Function:2:258 expressionInputWatch@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 tick@http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:12451:25

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

Я не знаю, что вызывает это и как его исправить. My angularjs version is 1.5.6 ui-router version is 0.3.1

Не знаю, связано ли это с моим кодом или конфликтует с другим плагином.

Answer 1

Не вижу в этом ничего плохого. Судимое воспроизвести вашу проблему с 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

Answer 2

Я нашел проблему, видимо, вы должны добавить классы «ui-select-choice» и «ui-select-match», иначе это не сработает.