2015-05-09 4 views
0

Я использую angularjs и bootstrap в своем приложении. Я не уверен, как установить выбранное значение с сервера.Bootstrap Multiple - установить выбранные значения с сервера

Ниже представлен мой html-код.

<div class="col-md-9"> 
     <label>Select Users</label> 
     <select class="select-full" id="multipleUsers" 
      placeholder="Choose Multiple Users" tabindex="2" 
      multiple="multiple" ng-model="groupForm.users"> 
     </select> 
    </div> 

В JS, я заполнить выпадающие значения следующим образом при загрузке страницы,

var url = "/dropdown/getAllUsers"; 
var allUsers = new Array(); 
$http({ 
    url: url, 
    method: "GET", 
    timeout: 200000 
}).success(function (data1, status) { 
    $scope.usersList = data1; 
    $.each(data1, function (i) { 
     allUsers.push({ 
      label: data1[i].name, 
      value: data1[i].id 
     }); 
    }); 

    $("#multipleUsers").multiselect('dataprovider', allUsers); 
    $(".btn-group").hide(); 
}).error(function (data1, status) { 
}); 

После выбора значения, я получить выбранные значения следующим образом.

groupForm.users в js дает мне все выбранные идентификаторы пользователей в значении, разделенном запятой.

Но я не уверен, как загрузить ранее выбранные значения с сервера при редактировании.

При редактировании значение должно быть загружено с сервера следующим образом.

enter image description here

+1

Вы пробовали? https://github.com/angular-ui/u-select. Смешивание dom манипуляции и угловой не лучший способ. –

+1

Рабочий пример: http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview –

+0

Это отлично работает. – user1578872

ответ

1

Если вы используете AngularJS, вы можете использовать UI Bootstrap. Они являются компонентами бутстрапа, написанными в чистом AngularJS AngularUI Team.

В общем, вы не можете выполнять манипулирование DOM, как это делает код jQuery. Решение в вашем угловом приложении может быть UI Select.

В угловом режиме манипуляции с DOM выполняются внутри директив. НЕ контроллеры. http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

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