Angular JS의 드롭 다운 값을 비교하여 텍스트 필드 값을 업데이트하는 방법은 무엇입니까?

안녕하세요 저는 Angular JS를 처음 사용합니다. 하나의 HTML 파일에 하나의 드롭 다운과 하나의 텍스트 영역이 있습니다. 선택한 드롭 다운 값을 기준으로 텍스트 영역 값이 업데이트됩니다. 여기 참고 : textarea는 드롭 다운에서 사용자가 선택한 것과 동일한 값을 표시하지 않습니다. 드롭 다운의 값에 따라 다른 값이 표시됩니다.Angular JS의 드롭 다운 값을 비교하여 텍스트 필드 값을 업데이트하는 방법은 무엇입니까?

다음은 내 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>

, 내가 드롭 다운의 값은 백엔드에서 오는 것은 내 컨트롤러 나머지 전화를 한 후 가지고있는 XML 응답에서 볼 수있는 것처럼 "menuName"을 표시합니다. 텍스트 영역에서 해당 작업 목록을 표시해야합니다. HTML 코드에서 "ng-model"을 사용했지만 선택한 메뉴의 값을 제공합니다. 하지만 해당 작업 값을 가져와야합니다. 어떻게 우리가 이것을 할 수 있습니다. 도와주세요.

출처

2017-02-15 Teddu

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="[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의 드롭 다운 값을 비교하여 텍스트 필드 값을 업데이트하는 방법은 무엇입니까?

답변

관련 문제