2016-06-29 27 views
0

我有一个学生列表,其中每个人都可以在多选下拉列表中为他们分配角色,但当我选择一个或两个角色时,它会发生变化对于桌上的所有学生来说,但每个学生都是独立的,所以如果我把角色助理分配给一个学生,它应该只用于那个。更新表格中单个数据的多选下拉列表

<html ng-app="myApp"> 
    <div ng-controller="MyController"> 
     <tbody> 
      <tr ng-repeat="S in SList"> 
       <td width="33%">{{S}}</td> 
       <td width="33%"> 
        <div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="Categories" selected-model="CategoriesSelected" checkboxes="true"> 
        </div> 
       <button type="submit" class="btn btn-primary">Submit</button> 
       </td> 
      </tr> 
     </tbody> 
    </div> 
    <script src="../../javascript/lodash.js"></script> 
    <script src="../../javascript/angular.js"></script> 
    <script src="../../javascript/angularjs-dropdown-multiselect.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="../../javascript/AngularControllers/Controllers.js"></script> 
    <script src="../../javascript/ui-bootstrap-tpls-1.3.3.js"></script> 
</html> 

THIS IS MY控制器,我已经粘贴到multidropdownlist

var app = angular.module('MyApp', ['angularjs-dropdown-multiselect']); 
app.controller('multiselectdropdown', ['$scope', '$http', function ($scope, $http) { 

    //Loading data to the table 
    var urlBase = '../Myhandler.ashx'; 

    this.getSList = function() { 
     $http.get(urlBase, { 
      params: { 
       plug: "MyClassname", 
       cmd: "MyMethodName" 
      } 
     }) 
     .success(function (Students) { 
      $scope.SList = Students; 
     }) 
     .error(function (error) { 
      $scope.status = 'Unable to load customer data: ' + error.message; 
     }); 
    } 

    this.getSList(); 
    //define object 
    $scope.CategoriesSelected = []; 
    $scope.Categories = []; 
    $scope.dropdownSetting = { 
     scrollable: true, 
     scrollableHeight : '200px' 
    } 
    //fetch data from database for show in multiselect dropdown 
    $http.get('/home/getcategories').then(function (data) { 
     angular.forEach(data.data, function (value, index) { 
      $scope.Categories.push({ id: value.CategoryID, label: value.CategoryName }); 
     }); 
    }) 
    //post or submit selected items from multiselect dropdown to server 
    $scope.SubmittedCategories = []; 
    $scope.SubmitData = function() { 
     var categoryIds = []; 
     angular.forEach($scope.CategoriesSelected, function (value, index) { 
      categoryIds.push(value.id); 
     }); 

     var data = { 
      categoryIds: categoryIds 
     }; 

     $http({ 
      method: "POST", 
      url: "/home/savedata", 
      data:JSON.stringify(data) 
     }).then(function (data) { 
      $scope.SubmittedCategories = data.data; 
     }, function (error) { 
      alert('Error'); 
     }) 
    } 
}]) 

这是我的问题相关的部分:如果我选择它的变化在表中的所有记录中的下拉列表选项。我如何才能仅针对我想要的学生进行更改?

感谢

回答

0

你所有的下拉似乎共用同一个模型

selected-model="CategoriesSelected" 

您必须使用自己的列表中为每个学生,例如

selected-model="S.CategoriesSelected" 

这你就必须初始化为每个学生

+0

谢谢,但请你帮我怎样才能使在临控制器这种变化? – user3122648

+0

我不知道你的SList是在哪里定义的,但是你必须在SList上遍历S并添加S.CategoriesSelected = []; – Thorsten

+0

我不确定你要在提交中做什么,那么你必须为所有学生或者只有一个学生发布数据?你需要发布S.CategoriesSelected当然,但不知道你的应用程序 – Thorsten

0

试试这个,让CategoriesSelected与学生的姓名作为重点对象。

$scope.SList = ['student1', 'student2', 'student3']; 
$scope.CategoriesSelected = {}; 

然后在HTML:

<tbody> 
    <tr ng-repeat="S in SList"> 
    <td width="33%">{{S}}</td> 
    <td width="33%"> 
     <div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="Categories" selected-model="CategoriesSelected[S]" checkboxes="true"></div> 
     <button type="submit" class="btn btn-primary">Submit</button> 
    </td> 
    </tr> 
</tbody> 
+0

我刚刚更新了我的问题,我a // //将数据加载到控制器部分中的表 以显示我如何填充学生部分,我从数据库和我加载到一个ng重复 在这种情况下,我有我的$ scope.SList在.success中,当我实现解决方案时,它不让我选择 – user3122648