角度选择-带有JSON对象的选项值

Question

我有一个带有ng-model的<select> 。 我希望<option>的值是JSON对象。

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

我下面的小伙子们展示了我想要达到的目标。

<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上的vm.person ，然后在那里进行angular.fromJson ，但这感觉不对。 感觉有更好的方法。

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

解决这个问题的正确方法是什么？

如果没有“角度”方式，那么在Javascript中处理此问题的常用方式是什么？

编辑

分叉的拨叉显示添加$scope.$watch 。

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

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

这样可以正确填充“名称”和“年龄”输入，但会中断选择（由于更改了模型，因此不再由所选值填充）。

Answer 1

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

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

Answer 2

不知道您是否只希望以这种方式获得结果。 将代码更改为以下代码后，即可获得所需的结果，

控制器代码：

script.js

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

app.controller('myCtrl', myCtrl);

function myCtrl() {

var self = this;
self.persons = [];
self.persons[0] = {
    "name": "Matt",
    "age": "21"
};
self.persons[1] = {
    "name": "John",
    "age": "22"
};
self.personSelected = personSelected;

function personSelected(personName) {
    var i = 0;
    console.log("Person selected called..")
    self.selectedPerson = {};
    for (i = 0; i < self.persons.length; i++) {
        if (self.persons[i].name == personName) {
            self.selectedPerson = self.persons[i];
            break;
        }
    }
}
}

HTML代码：

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

  <div>
     Person: <select ng-model="vm.person" ng-change="vm.personSelected(vm.person)">
       <option>Matt</option>
       <option>John</option>
     </select>
  </div>


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

  </div>
</body>

角度选择-带有JSON对象的选项值

问题描述

2 个解决方案

解决方案1
6 已采纳 2016-03-09 11:47:17

解决方案2
2 2016-03-09 10:55:49

角度选择-带有JSON对象的选项值

问题描述

2 个解决方案

解决方案1 6 已采纳 2016-03-09 11:47:17

解决方案2 2 2016-03-09 10:55:49

解决方案1
6 已采纳 2016-03-09 11:47:17

解决方案2
2 2016-03-09 10:55:49