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

嗨，我是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代码中显示相应的TaskList。但是我需要获得相应的任务价值。我们应该怎么做。请帮助。

我将您的XML转换为JSON对象，但其余的是相同的。使用$filter您可以实现它。在这里，您可以做到这一点。首先，您必须依赖性注入$filter，然后开始使用它。由于您对每个Menuname都有多个Taks，因此我展示了所有这些。

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

相关内容

最新更新

热门标签：