Question

我有一个学生列表，每个学生都可以在多选下拉列表中为他们分配角色，当我为表中的所有学生选择一个或两个角色时，我会发现，但是每个学生都是如果我将角色助理分配给学生，那么它应该只针对那个人。

<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>

这是我的控制器，我已经粘贴了与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');
        })
    }
}])

这是我的问题：如果我在下拉列表中选择选项，则会更改表格中的所有记录。我怎样才能只为我想要的学生做出改变？

谢谢

Answer 1

您的所有下拉列表似乎都拥有相同的型号

selected-model="CategoriesSelected"

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

selected-model="S.CategoriesSelected"

然后你必须为每个学生初始化

Answer 2

试试这个，将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>

更新表

2 个答案: