Question

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

以下是我的HTML代码段。下拉的价值来自我在控制器中休息后得到的后端：

   <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”，但它给出了所选菜单的值。但我需要获得相应的任务价值。我们应该怎么做。请帮忙。

Answer 1

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

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

如何根据Angular JS中的下拉值比较更新文本字段值？

1 个答案: