Angular JSのドロップダウン値との比較に基づいてテキストフィールドの値を更新するにはどうすればよいですか？

こんにちは、私はAngular JSを初めて使っています。 1つのドロップダウンと1つのテキストエリアを持つ1つのHTMLファイルがあります。テキスト領域の値は、選択されたドロップダウン値に基づいて更新されます。ここに注意してください：textareaはドロップダウンでユーザーによって選択された同じ値を表示しません。ドロップダウンの値に基づいて他の値が表示されます。Angular JSのドロップダウン値との比較に基づいてテキストフィールドの値を更新するにはどうすればよいですか？

以下は私のHTMLコードスニペットです。ドロップダウンの値は、私は私のコントローラでREST呼び出しを行った後に得たバックエンドから来ている：私は、ドロップダウンリストで

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

：私はバックエンドから取得しています

<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形式でこのようなものですXMLレスポンスで見られるように "menuName"を表示します。テキストエリアでは、対応するタスクリストを表示する必要があります.HTMLコードで "ng-model"を使用しましたが、これは選択したメニューの値を示します。しかし、私は対応するタスク値を取得する必要があります。どうすればこのことができますか？助けてください。

出典

2017-02-15 Teddu

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="[email protected]" 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="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" 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-15 11:16:17 nivas

Angular JSのドロップダウン値との比較に基づいてテキストフィールドの値を更新するにはどうすればよいですか？

答えて

関連する問題