从下拉列表中设置文本输入元素的值

Question

我有一个可用于选择对象的下拉列表。做出选择之后，应用程序应该使用该对象的属性来设置两个输入字段的值。我创建了下面的代码，但我无法设置输入字段的值。你能建议吗？

这里是视图

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

这里是控制器。

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

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

    $scope.getPhoneAndEmail = function(user){ 

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

    } 

}]); 

Answer 1

{{}}总是返回字符串，所以在最后你不会JavaScript对象发送到控制器的方法。

您既可以使用NG选项也可以从阵列的控制器发送索引，并获得它...

NG选项的解决方案

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

指数的解决方案

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

和控制器

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

Answer 2

你应该解析JSON，改变它，这样

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

DEMO

Answer 3

下面是你的代码的工作版本，删除ng-change和使用ng-options代替。

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

下面是HTML部分：

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

一个工作小提琴：

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