How to update text field value based on comparision with dropdown value in Angular JS?

Question

Hi I am new to Angular JS. I have one HTML file which has one dropdown and one textarea. Text area value will be updated based on selected dropdown value. Note here: textarea won't display the same value which is selected by user in dropdown. It will display some other value based on dropdown's value.

Below is my HTML code snippet. Dropdown's value are coming from backend which I got after making rest call in my 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>

Response which I am getting from backend is like this in 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, I am displaying "menuName" as you can see in XML response. While in textarea I need to display corresponding tasklist.I have used "ng-model" in my HTML code, but that gives the value of selected menu. But I need to get corresponding tasks value. How can we do this. Please help.

nivas · Accepted Answer · 2017-02-15T11:23:29.340

I converted your xml into a json object but the rest is same. Using $filter you can achieve it. Here how you can do it. First you have to dependency inject $filter then start using it. Since you have multiple taks for each menuName so i displayed all of them.

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

How to update text field value based on comparision with dropdown value in Angular JS?

1 Answers1