CODEWITHSUNDEEP
angularjs
defaultcheckbox
defaultcheckbox

Reputation: 749

Set value on text input elements from dropdown

I have a dropdown that can be used to select an object. After making the selection, the application should use properties of that object to set the value on two input fields. I created the code below, but I am unable to set the value of the input fields. Can you advise?

Here is the view 

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header"></h2>
        </div>
        <div class="col-md-12">
          <select ng-model="user" ng-change="getPhoneAndEmail(user)" >
              <option ng-repeat="user in users" value="{{user}}">
                  {{user.name}}
              </option>
          </select>
          {{name}}
          {{user}}
<input ng-model="user.name">
<input ng-model="user.phone">
      </div>
    </div>
</main>

Here is the controller. 

var App = angular.module("App",[]);
App.controller("cnt-asignaturas", ["$scope", "$http", function($scope,$http){

  $scope.users = [
  {
   name:"Johnny",
   "parentId":"1",
   "email": "[email protected]",
   "phone": "2125551212"
  },{
   name:"Kelvin",
   "parentId":"2",
   "email": "[email protected]",
   "phone": "2125551212"
  },{
   name:"Jerry",
   "parentId":"3",
   "email": "[email protected]",
   "phone": "2125551212"
  }];

  $scope.getPhoneAndEmail = function(user){

 $scope.name = user.name;
 $scope.phone = user.phone;

  }

}]);

Upvotes: 1

Views: 55

Answers (3)

Thalaivar
Thalaivar

Reputation: 23632

Below is the working version of your code, remove ng-change and use ng-options instead. 

function MyCtrl($scope) {
    $scope.user = {};
    $scope.user.name = "11";
    $scope.user.phone = "111";
    $scope.users = [{
        name: "Johnny",
        "parentId": "1",
        "email": "[email protected]",
        "phone": "2125551212"
    }, {
        name: "Kelvin",
        "parentId": "2",
        "email": "[email protected]",
        "phone": "2125551212"
    }, {
        name: "Jerry",
        "parentId": "3",
        "email": "[email protected]",
        "phone": "2125551212"
    }];
}

Below is the HTML part: 

<div ng-app ng-controller="MyCtrl">
    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header"></h2>
        </div>
        <div class="col-md-12">
            <select id="sel" class="input-block-level" ng-model="user" ng-options="user as user.name for user in users">    
        {{user.name}}
    </select>
            <input ng-model="user.name">
            <input ng-model="user.phone">
        </div>
    </div>
</div>

A working fiddle:

https://jsfiddle.net/jhuacsn6/1/

Upvotes: 0

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

{{}} always return string so at the end you will not send javascript object to your controller method.

You could either use ng-options or you can send index and get it from array at your controller...

ng-options solution

<select ng-model="user" 
        ng-change="getPhoneAndEmail(user)" 
        ng-options="user as user.name for user in users">
</select>

index solution

<select ng-model="user" ng-change="getPhoneAndEmail(user)">
   <option ng-repeat="user in users" value="{{$index}}">
       {{user.name}}
   </option>
</select>

and controller

$scope.getPhoneAndEmail = function(index){
  var user = $scope.users[index];
  $scope.name = user.name;
  $scope.phone = user.phone;
}

Upvotes: 3

Sajeetharan
Sajeetharan

Reputation: 222582

You should parse the JSON, Change it like this

  $scope.getPhoneAndEmail = function(user) {
      $scope.user =  JSON.parse(user);
      $scope.name = user.name;
      $scope.phone = user.phone;
      console.log(user);
    }

DEMO

Upvotes: 1

Related Questions