0

嗨，我是 Angular JS 的新手。我有一个 HTML 文件，它有一个下拉列表和一个文本区域。文本区域值将根据选定的下拉值更新。请注意：textarea 不会显示用户在下拉菜单中选择的相同值。它将根据下拉列表的值显示一些其他值。

下面是我的 HTML 代码片段。Dropdown 的值来自我在控制器中进行休息调用后得到的后端：

   <select name="functionality" id="functionality" ng-model="selectedFunctionality">
       <option ng-repeat="functionality in functionalities.menuDetailsList.menuDetails" value="{{functionality.menuName}}">{{functionality.menuName}}</option>
   </select>

   <textarea id="scode" class="form-control" ng-model="selectedFunctionality"></textarea>

我从后端得到的响应是这样的 XML 格式：

<menuDetailsList>
    <menuDetails>
        <menuName>FIRST</menuName>
        <taskList>
            <task>HYNN911</task>
            <task>HXTELE</task>
            <task>HXBTBCT</task>
        </taskList>
    </menuDetails>
    <menuDetails>
        <menuName>SECOND</menuName>
        <taskList>
            <task>1234</task>
            <task>abcd</task>
            <task>efghi</task>
        </taskList>
    </menuDetails> 
<menuDetailsList>

在下拉列表中，我正在显示“menuName”，正如您在 XML 响应中看到的那样。在 textarea 中，我需要显示相应的任务列表。我在 HTML 代码中使用了“ng-model”，但这给出了所选菜单的值。但我需要得到相应的任务值。我们应该怎么做。请帮忙。

4

1 回答 1

3

我将您的 xml 转换为 json 对象，但其余部分相同。使用$filter你可以实现它。在这里你可以怎么做。首先你必须依赖注入$filter然后开始使用它。由于每个 menuName 都有多个任务，所以我显示了所有任务。 

// Code goes here

var app = angular.module('myApp', []);

app.controller('MainController', ['$scope','$filter', function ($scope, $filter) {
  $scope.msg = "Hello";
  
  $scope.menuDetailsList = [
      {
        "menuName": "FIRST",
        "taskList": {
          "task": [
            "HYNN911",
            "HXTELE",
            "HXBTBCT"
          ]
        }
      },
      {
        "menuName": "SECOND",
        "taskList": {
          "task": [
            "1234",
            "abcd",
            "efghi"
          ]
        }
      }
    ];
    
    $scope.$watch('selectedFunctionality', function (newV, oldV) {
      if (newV != oldV) {
        if(angular.isDefined($scope.menuDetailsList)) {
          var matchedMenu = $filter('filter')($scope.menuDetailsList, {menuName: $scope.selectedFunctionality});
          debugger;
          if (matchedMenu.length !=0 ) {
            $scope.tasks = matchedMenu[0].taskList.task;
          }
          
        }
      }
    });
}]);
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body class="container" ng-controller="MainController" style="margin-top:20px;">
    
    <div class="row">
      <label for="functionality">Select an item</label>
    <select name="functionality" id="functionality" ng-model="selectedFunctionality">
       <option ng-repeat="functionality in menuDetailsList" value="{{functionality.menuName}}">{{functionality.menuName}}</option>
   </select>
   </div>
  <br />
  <div ng-repeat="task in tasks">
   <textarea id="scode" class="form-control" ng-model="task"></textarea>
   <br />
   </div>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

于 2017-02-15T11:16:17.517 回答