ui-select f.selectedは定義されていません

Question

私のアプリでUI選択しようとしています。 <それは私に多くのトラブルを与えています。私は例と文書を辿り、私がここで間違っていることを理解できません。

これは私の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

私はこれが何を引き起こしているのか、それをどう修正するのか分かりません。 私のangularjsバージョンは1.5.6です ui-routerバージョンは0.3.1

私のコードや他のプラグインと競合するかどうかわかりません。

Answer 1

何か問題はありません。ここではUI-選択18.1を使用して問題を再現するためにしようと試み：Reproduction多分それは私はそれがvm.form.rolesを読み取ることができませんだと思い誤差に基づいて$アイテムコンポーネント（これは私のために働いていた）

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

ある

Answer 2

問題が見つかりました。明らかに、 "ui-select-choices"と "ui-select-match"というクラスを追加することになっています。