Bootstrap Multiple - 从服务器设置选定的值

时间:2015-05-09 23:08:43

标签: javascript jquery angularjs twitter-bootstrap

我在我的应用程序中使用angularjs和bootstrap。我不确定如何从服务器设置所选值。

以下是我的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) {
});

选择值后,我得到如下所选的值。

js中的groupForm.users以逗号分隔值为我提供所有选定的用户ID。

但我不确定如何在编辑时从服务器加载以前选择的值。

在编辑时,应按如下方式从服务器加载值。

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您使用的是AngularJS,则可以使用UI Bootstrap。它们是AngularUI Team在纯AngularJS中编写的引导组件。

一般情况下,你不能像jQuery代码那样进行DOM操作。角度应用中的解决方案可以是UI Select

  

在Angular中,DOM操作在指令内部完成。不   控制器。   http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/