javascript - Angular 选择 - 带有 JSON 对象的选项值

Question

我有一个 <select>用 ng-model .我想要我的 <option> 的值s 是 JSON 对象。

当用户选择一个选项时，我想显示所选对象的各个属性。

我有以下 plunker显示我正在努力实现的目标。

<div ng-controller="myCtrl as vm">

    <div>
        Person: 
        <select ng-model="vm.person">
            <option value='{"name": "Matt", "age": "21"}'>Matt</option>
            <option value='{"name": "John", "age": "22"}'>John</option>
        </select>
    </div>


    <br>
    Person: <input type="text" ng-model="vm.person">
    Name: <input type="text" ng-model="vm.person.name">
    Age: <input type="text" ng-model="vm.person.age">

</div>

问题是 vm.person是一个字符串，而不是一个对象，所以我无法访问它的属性。

我试过了fromJson但这会引发错误，因为它是不可分配的(这是明智的)。

<input type="text" ng-model="angular.fromJson(vm.person.name)">

我可以在 vm.person 上观察变化, 然后做 angular.fromJson在那里，但感觉不对。感觉还有更好的办法。

我基本上想在字符串到达​​模型之前对其进行解析，以便在它到达模型时，它是一个 javascript 对象。这将允许我访问该对象的属性。

用 Angular 处理这个问题的正确方法是什么？

如果没有“Angular ”方式，在 Javascript 中处理这个问题的常用方式是什么？

---

编辑

A forked plunker显示添加 $scope.$watch 的效果.

function myCtrl($scope){
    var vm = this;

    $scope.$watch('vm.person', function(){
        vm.person = angular.fromJson(vm.person);
    })
}

这允许正确填充 Name 和 Age 输入，但它会破坏选择(它不再由所选值填充，因为模型已更改)。

Answer 1

如何使用 ng-options，您可以从 controller 传递 object，然后在此基础上进行选择。

HTML:

 <div ng-controller="myCtrl as vm">
   <select ng-options="selected.name for selected in vm.person" ng-model="vm.customPerson">
      <option value="" disabled>Person</option>
   </select>
   <br>
   <br>
   Person: <input type="text" ng-model="vm.customPerson">
   <br>
   Name: <input type="text" ng-model="vm.customPerson.name">
   <br>
   Age: <input type="text" ng-model="vm.customPerson.age">
</div>

JS:

var app = angular.module('app', []);

app.controller('myCtrl',
function($scope){
  this.person=[
      {name: 'Matt',    age: '12'},
      {name: 'John',     age: '23'},
    ];
});

我希望以下Plunker 能满足您的需求。

插入器: http://plnkr.co/edit/rU5vW5KuvJNJOr7tSOPq?p=preview