2015-04-01 4 views
-2

Я использую плагин bootstrap-multiselect для создания выпадающих списков с несколькими выборами.перезагрузка моего спуска при использовании пользовательской директивы

Как это:

MultiSelect dropdown

Мой выпадающий построен так:

<select id="ms{{chore.id}}" multiple="multiple" applyplugin> 
    <option ng-repeat="familyMember in myService.people" value={{familyMember.name}}>{{familyMember.name}}</option> 
</select> 

У меня есть сервис:

myapp.service('myService', function() { 
    var familyList = this; 
    familyList.people = [ 
     {name: 'Jax', dob: '01/01/1974', cell: '3035551212', carrier: 'ATT', email: 'jax[email protected]', active: true}, 
     {name: 'Tara', dob: '03/01/1974', cell: '3035551313', carrier: 'SPRINT', email: '[email protected]', active: false}]; 
    familyList.addPerson = function() { 
     //alert(familyList.inputName + ', ' + familyList.inputBirthday + ', ' + familyList.inputCellPhone, + ', ' + familyList.inputCarrier + ', ' + familyList.inputEmail); 
     familyList.people.push({ 
      name: familyList.inputName, dob: familyList.inputBirthday, 
      cell: familyList.inputCellPhone, carrier: familyList.inputCarrier, 
      email: familyList.inputEmail, active: true 
     }); 

     familyList.inputName = ''; 
     familyList.inputDOB = ''; 
     familyList.inputCellPhone = ''; 
     familyList.inputCarrier = 0; 
     familyList.inputEmail = ''; 
     familyList.active = true; 
    }; 
}); 

Я работаю на пользовательской директивы это не очень хорошо работает:

myapp.directive('applyplugin', function() { 
    return { 
     template: '<select id="ms{{chore.id}}" multiple="multiple"> <option ng-repeat="familyMember in myService.people" value={{familyMember.name}}>{{familyMember.name}}</option> </select>', 
     link: function() { 
     } 
    } 
}); 

Проблемы Я пытаюсь выяснить, когда я добавить новый семейный элемент в массив familyList.people я могу видеть, что он будет добавлен в другой части коды, но мое падение падение не показывает новое элемент.

Я действительно просто хочу, чтобы мои капли вниз отображали новый элемент. Вы можете видеть, почему это не просто добавит новое значение в список опций?

Если добавить новый член семьи, а затем добавить новый элемент хозяйственной работы, то я получаю обновленный ListBox (но оригинальные детали CHORE не получить вновь добавленные член семьи):

enter image description here

ОБНОВЛЕНИЕ!

Я обновил (а) мой Fiddle, и вы увидите, как члены семьи добавляются в список. Однако, когда я применяю плагин, который я использую (bootstrap-multiselect), он не добавляет новые элементы в список, когда плагин активен.

Любые идеи?

+0

вы можете сделать это в jsfiddle? – Shafeeque

+0

@Shafeeq - Я добавил скрипку, но я не могу получить данные для показа там. – webdad3

+0

Некоторые ошибки в скрипке. В любом случае попробуйте это http://stackoverflow.com/questions/15342672/angularjs-using-a-service-as-a-model-ng-repeat-not-updating – Shafeeque

ответ

1

Для множественного выбора с помощью бутстрапа и углового я бы рекомендовал AngularJS ui-select https://github.com/angular-ui/ui-select вместо того, чтобы изобретать колесо.

См http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview enter image description here

<ui-select multiple ng-model="multipleDemo.colors" theme="select2"> 
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> 
    <ui-select-choices repeat="color in availableColors | filter:$select.search"> 
     {{color}} 
    </ui-select-choices> 
    </ui-select> 

Это является частью более крупного проекта с большим количеством элементов пользовательского интерфейса: http://angular-ui.github.io/

Смежные вопросы