Angular JS ng-model 对于数组的数组不能正常工作

Question

我的要求

我应该有两个 multiselect 组合框
应该可以select多个值
基于组合框 1 中的 selected 值，第二个组合框应填充值

为此，我正在使用 AngularJs 和 Multiselect.Js

我能达到 1 和 2。

对于第 3 点。我发现很难根据来自组合框 1selected 的值填充数据

注意：当我select单个角色时，相关工人信息显示在第二个组合框中，但当我select多个角色时，它不起作用。

我认为这部分代码不适用于多个数组

 options="c.WorkerName for c in selectedRoles.workers"

如果您指定数组索引，那么它将起作用，并且只有 select 该索引的工作人员，但是当多个值 select 下面的代码不起作用时。

 options="c.WorkerName for c in selectedRoles[0].workers"

参考自 http://plnkr.co/edit/xWvfWYjaW7TThKZONkv5?p=preview

我的 html 代码如下：

    <!DOCTYPE html>
    <html ng-app="plunker">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.1.x" src="angular.min.js" data-semver="1.1.5"></script>
        <script src="app.js"></script>
        <script src="multiselect.js"></script>
    </head>

<body ng-controller="MainCtrl">
    <h1>Example</h1>
    Multi select:

    <multiselect class="input-xlarge" multiple="true" header="select roles"
        ng-model="selectedRoles"
        options="c.roleName for c in roles"
        change="selected()"
        template-url="multiselect.tmpl.html">
    </multiselect>

    <div class="well well-small">
        {{selectedRoles}}
    </div> 

    <multiselect class="input-xlarge" multiple="true" header="select workers"
        ng-model="selectedWorkers"
        options="c.WorkerName for c in selectedRoles.workers"
        change="selected()"
        template-url="multiselect.tmpl.html">
         </multiselect>

    <div class="well well-small">
        {{selectedWorkers}}
    </div>
</body>

</html>

和Javascript和JSON数据：

Combobox 1：将显示来自“$scope.roles”的"roleName"，并且组合框 2：应显示工人，来自 selected "rolename"（来自组合框 1）

var app = angular.module('plunker', ['ui.multiselect']);

app.controller('MainCtrl', function ($scope) 
{
    $scope.name = 'multiselect';

$scope.roles =
    [
      {
          "roleGuid": "7b48aa01-7dad-4640-abcb-04d8e2666160",
          "roleName": "Electric",
          "workers": [
            {
                "WorkerName": "Bond, James",
                "WorkerGuid": "dac36324-2f7e-4dca-9e3a-2a9d8ac419ee"
            },
            {
                "WorkerName": "Story, 843",
                "WorkerGuid": "85a234a9-3d86-41c2-832c-7a3d40977e88"
            },
            {
                "WorkerName": "Test, SAT124",
                "WorkerGuid": "135149fb-b34e-4270-82f6-3488bd59a598"
            },
            {
                "WorkerName": "Test, SAT-18_1",
                "WorkerGuid": "15bf6b49-5405-41a5-8473-cfe389bbb1ff"
            },
            {
                "WorkerName": "Verma, Sunil",
                "WorkerGuid": "c785f1a1-34e3-4687-9df1-961331b62e0e"
            },
            {
                "WorkerName": "Y, Venkata",
                "WorkerGuid": "ae18e61b-340e-4f27-92ac-c701026242c9"
            },
            {
                "WorkerName": "Yadalla, Venkata",
                "WorkerGuid": "a9142270-e084-4c38-8e9f-448e647c8841"
            }
          ]
      },
      {
          "roleGuid": "e182d217-7806-4227-905e-ca64c7ac9b76",
          "roleName": "General Employee",
          "workers": [
            {
                "WorkerName": "1111, hen",
                "WorkerGuid": "93ef8fc9-6fcd-4d26-afca-7ba01968f9ab"
            },
            {
                "WorkerName": "Giri, Ashok",
                "WorkerGuid": "2e0c7ba6-3a57-4970-a30c-68fba448492b"
            }
          ]
      },
      {
          "roleGuid": "270ad5e9-370a-43cc-927c-c9b275037447",
          "roleName": "Inspection Worker",
          "workers": [
            {
                "WorkerName": "Test, pals3",
                "WorkerGuid": "d447cd4a-9f19-463f-880b-9e09e830f9fd"
            }
          ]
      }
    ];
$scope.selectedRoles = [];
$scope.selectedWorkers = [];

});

多select模板

<div class="dropdown">
  <button class="btn" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
    <span class="pull-left">{{header}}</span>
    <span class="caret pull-right"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <input class="input-block-level" type="text" ng-model="searchText.label" autofocus="autofocus" placeholder="Filter" />
    </li>
    <li ng-show="multiple">
      <button class="btn-link btn-small" ng-click="checkAll()"><i class="icon-ok"></i> Check all</button>
      <button class="btn-link btn-small" ng-click="uncheckAll()"><i class="icon-remove"></i> Uncheck all</button>
    </li>
    <li ng-repeat="i in items | filter:searchText">
      <a ng-click="select(i); focus()">
        <i ng-class="{'icon-ok': i.checked, 'icon-empty': !i.checked}"></i>{{i.label}}</a>
    </li>
  </ul>
</div>

Answer 1

实现此目的的一种方法是编写一个函数，根据所选角色生成工作人员列表。每当所选角色发生变化时，调用此函数以更新可选工作人员列表。

这可能会让您走上正确的道路：

http://plnkr.co/edit/UrCJeCFeRvFXgBaGUiA8?p=preview

var app = angular.module('plunker', ['ui.multiselect']);

app.controller('MainCtrl', function($scope) {
  $scope.roles = [{
    "roleGuid": "7b48aa01-7dad-4640-abcb-04d8e2666160",
    "roleName": "Electric",
    "workers": [{
      "WorkerName": "Bond, James",
      "WorkerGuid": "dac36324-2f7e-4dca-9e3a-2a9d8ac419ee"
    }, {
      "WorkerName": "Story, 843",
      "WorkerGuid": "85a234a9-3d86-41c2-832c-7a3d40977e88"
    }, {
      "WorkerName": "Test, SAT124",
      "WorkerGuid": "135149fb-b34e-4270-82f6-3488bd59a598"
    }, {
      "WorkerName": "Test, SAT-18_1",
      "WorkerGuid": "15bf6b49-5405-41a5-8473-cfe389bbb1ff"
    }, {
      "WorkerName": "Verma, Sunil",
      "WorkerGuid": "c785f1a1-34e3-4687-9df1-961331b62e0e"
    }, {
      "WorkerName": "Y, Venkata",
      "WorkerGuid": "ae18e61b-340e-4f27-92ac-c701026242c9"
    }, {
      "WorkerName": "Yadalla, Venkata",
      "WorkerGuid": "a9142270-e084-4c38-8e9f-448e647c8841"
    }]
  }, {
    "roleGuid": "e182d217-7806-4227-905e-ca64c7ac9b76",
    "roleName": "General Employee",
    "workers": [{
      "WorkerName": "1111, hen",
      "WorkerGuid": "93ef8fc9-6fcd-4d26-afca-7ba01968f9ab"
    }, {
      "WorkerName": "Giri, Ashok",
      "WorkerGuid": "2e0c7ba6-3a57-4970-a30c-68fba448492b"
    }]
  }, {
    "roleGuid": "270ad5e9-370a-43cc-927c-c9b275037447",
    "roleName": "Inspection Worker",
    "workers": [{
      "WorkerName": "Test, pals3",
      "WorkerGuid": "d447cd4a-9f19-463f-880b-9e09e830f9fd"
    }]
  }];
  $scope.selectedRoles = [];

  var selectableWorkers = (function() {
    return function(roles) {
      var selectableWorkers = [];
      if (!roles.length) {
        return selectableWorkers;
      }
      for (var i = 0, lenR = roles.length; i < lenR; i++) {
        for (var j = 0, lenW = roles[i].workers.length; j < lenW; j++) {
          selectableWorkers.push(roles[i].workers[j]);
        }
      }
      return selectableWorkers;
    };
  })();

  $scope.$watchCollection('selectedRoles', function(roles) {
    $scope.selectedWorkers = [];
    $scope.selectableWorkers = selectableWorkers(roles);
  });

  $scope.selectableWorkers = [];
  $scope.selectedWorkers = [];
});

Angular JS ng-model 对于数组的数组不能正常工作

Angular JS ng-model is not working properly for array of array

angularjs

angularjs-ng-repeat

bootstrap-multiselect