将Json响应数据移动到下拉列表中

时间:2016-09-20 12:48:42

标签: angularjs json angularjs-ng-change

我有以下JSON数据。

我需要将所有角色名称移动到下拉列表中。

JSON:

{
"json": {
    "response": {
      "servicetype": "1",
      "functiontype": "10011",
      "statuscode": "0",
      "statusmessage": "Success",
      "data": {
        "assignedroles": [
          {
            "roleid": 162,
            "rolename": "Admin",
            "roleinformation": {
              "A": [
                {
                  "1st floor": 10
                }
              ]
            }
          },
          {
            "roleid": 163,
            "rolename": "Resident",
            "roleinformation": {
              "A": [
                {
                  "1st floor": 10
                }
              ]
            }
          }
        ],
        "unassignedroles": [
          {
            "roleid": 36,
            "rolename": "Product Managers",
            "divisionlabel": "Department ",
            "subdivisionlabel": "Category",
            "roleinformation": {
              "QA": [
                {
                  "White Box Testing": 0
                }
              ]
            }
          },

          {
            "roleid": 108,
            "rolename": "Teacher",
            "divisionlabel": "Class",
            "subdivisionlabel": "Div",
            "roleinformation": ""
          },
          {
            "roleid": 115,
            "rolename": "Staff",
            "divisionlabel": "Class",
            "subdivisionlabel": "Section",
            "roleinformation": {
              "1": [
                {
                  "A": 0
                }
              ]
            }
          },
          {
            "roleid": 116,
            "rolename": "Student",
            "divisionlabel": "Class",
            "subdivisionlabel": "Section",
            "roleinformation": {
              "1": [
                {
                  "A": 0
                }
              ]
            }
          },
          {
            "roleid": 184,
            "rolename": "CANt_MANAGE_Gbase",
            "divisionlabel": "Division",
            "subdivisionlabel": "SubDivision",
            "roleinformation": {
              "Div": [
                {
                  "Sdiv": 0
                },
                {
                  "Sdiv1": 0
                }
              ]
            }
          },
          {
            "roleid": 191,
            "rolename": "Legend",
            "divisionlabel": "a",
            "subdivisionlabel": "b"
          }
        ]
      }
    }
  }
}

我需要从json响应中获取已分配和未分配值的角色名称。我只能为指定角色做,但不能同时移动两者。

HTML:

<div class="form-group">
  <label class="control-label col-sm-10" for="groupz">Select Role*</label>
  <select class="form-control" name="role"
          ng-model="model.rolename"
          ng-change="GetAssignRole(model.rolename)">
    <option selected>Select Roles</option>
    <option ng-repeat="item in model.roles track by $index"
            value="{{item}}">{{item}}</option>
  </select>
  <div>

需要协助处理它的JS部分,比如如何在下拉列表中加载它。

2 个答案:

答案 0 :(得分:0)

你可以通过将assignedroles []和unassignedroles []联合起来制作单个数组来实现这一点。你的“model.roles”既有“assignedroles”又有“unassignedroles”。

如果没有,请使用Arrat.prototype.concat() to concat.

答案 1 :(得分:0)

这是工作plunkr

您需要将已分配和未分配的规则组合在一起并将其推送到像这样的数组中

app.controller('CompaniesController', ['$scope',function($scope) {
 var mData=[{
"json": {
    "response": {
      "servicetype": "1",
      "functiontype": "10011",
      "statuscode": "0",
      "statusmessage": "Success",
      "data": {
        "assignedroles": [
          {
            "roleid": 162,
            "rolename": "Admin",
            "roleinformation": {
              "A": [
                {
                  "1st floor": 10
                }
              ]
            }
          },
          {
            "roleid": 163,
            "rolename": "Resident",
            "roleinformation": {
              "A": [
                {
                  "1st floor": 10
                }
              ]
            }
          }
        ],
        "unassignedroles": [
          {
            "roleid": 36,
            "rolename": "Product Managers",
            "divisionlabel": "Department ",
            "subdivisionlabel": "Category",
            "roleinformation": {
              "QA": [
                {
                  "White Box Testing": 0
                }
              ]
            }
          },
          {
            "roleid": 108,
            "rolename": "Teacher",
            "divisionlabel": "Class",
            "subdivisionlabel": "Div",
            "roleinformation": ""
          },
          {
            "roleid": 115,
            "rolename": "Staff",
            "divisionlabel": "Class",
            "subdivisionlabel": "Section",
            "roleinformation": {
              "1": [
                {
                  "A": 0
                }
              ]
            }
          },
          {
            "roleid": 116,
            "rolename": "Student",
            "divisionlabel": "Class",
            "subdivisionlabel": "Section",
            "roleinformation": {
              "1": [
                {
                  "A": 0
                }
              ]
            }
          },
          {
            "roleid": 184,
            "rolename": "CANt_MANAGE_Gbase",
            "divisionlabel": "Division",
            "subdivisionlabel": "SubDivision",
            "roleinformation": {
              "Div": [
                {
                  "Sdiv": 0
                },
                {
                  "Sdiv1": 0
                }
              ]
            }
          },
          {
            "roleid": 191,
            "rolename": "Legend",
            "divisionlabel": "a",
            "subdivisionlabel": "b"
          }
        ]
      }
    }
  }
}
]

      $scope.ruleGrouped = [];
      angular.forEach(mData, function(assignedRule) {
        $scope.ruleGrouped.push(assignedRule.json.response.data.assignedroles);
        angular.forEach(assignedRule.json.response.data.unassignedroles, function(unassignedRule) {
            $scope.ruleGrouped.push(unassignedRule);
        });
      });
  }
]);

在HTML中,您需要修改代码,如下所示

<select ng-model="form.selectedTestAccount" ng-options="rules.rolename for rules in ruleGrouped">

      <option value="" selected="selected">Choose</option>
  </select>