Wie aktualisiert man den Textfeldwert basierend auf dem Vergleich mit dem Dropdown-Wert in Angular JS?

Hallo ich bin neu in Angular JS. Ich habe eine HTML-Datei mit einem Dropdown und einem Textfeld. Der Textbereichswert wird basierend auf dem ausgewählten Dropdown-Wert aktualisiert. Beachten Sie hier: textarea wird nicht den gleichen Wert anzeigen, der vom Benutzer im Dropdown-Menü ausgewählt wurde. Es wird ein anderer Wert basierend auf dem Dropdown-Wert angezeigt.Wie aktualisiert man den Textfeldwert basierend auf dem Vergleich mit dem Dropdown-Wert in Angular JS?

Unten ist mein HTML-Code-Snippet. Dropdown Wert aus Backend kommen, die ich bekam, nachdem Sie Rest Anruf in meinem Controller:

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

Antwort, die ich von Backend bekommen ist wie diese im XML-Format:

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

In Dropdownlist, ich bin Anzeige von "menuName", wie Sie in der XML-Antwort sehen können. Während in Textarea muss ich entsprechende Tasklist anzeigen. Ich habe "ng-Modell" in meinem HTML-Code verwendet, aber das gibt den Wert des ausgewählten Menüs. Aber ich muss entsprechende Aufgabenwerte bekommen. Wie können wir das machen? Bitte helfen Sie.

Quelle

2017-02-15 Teddu

Ich konvertierte Ihre XML in ein JSON-Objekt, aber der Rest ist gleich. Mit $filter können Sie es erreichen. Hier, wie Sie es tun können. Zuerst müssen Sie die Abhängigkeit injizieren $filter dann starten Sie es zu verwenden. Da Sie für jeden menuName mehrere Aufgaben haben, habe ich alle angezeigt.

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

Quelle

2017-02-15 11:16:17 nivas

Wie aktualisiert man den Textfeldwert basierend auf dem Vergleich mit dem Dropdown-Wert in Angular JS?

Antwort

Verwandte Themen