2016-06-29 38 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

相關問題