带有JSON对象的angular select-option值
angular select - option values with JSON object
我有一个带有ng-model
的<select>
。我希望<option>
的值是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
是一个字符串,而不是一个对象,所以我无法访问它的属性
我已经尝试过Json,但这会导致一个错误,因为它是不可赋值的(这是合理的(。
<input type="text" ng-model="angular.fromJson(vm.person.name)">
我可以观察vm.person
的变化,然后在那里做angular.fromJson
,但感觉不对。感觉有更好的方法。
我本质上想在字符串到达模型之前解析它,这样当它到达模型时,它就是一个javascript对象。这将允许我访问该对象的属性。
正确的处理方法是什么?
如果没有"角度"的方法,那么在Javascript中处理这个问题的常见方法是什么?
编辑
一个分叉的plunker,用于显示添加$scope.$watch
的效果。
function myCtrl($scope){
var vm = this;
$scope.$watch('vm.person', function(){
vm.person = angular.fromJson(vm.person);
})
}
这允许正确填充"名称"answers"年龄"输入,但会打断选择(因为模型已更改,所以不再由选定值填充(。
使用ng选项怎么样,您可以从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
不确定是否只希望以这种方式得到结果。您可以在将代码更改为以下后获得您想要的结果,
控制器代码:
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>
相关文章:
- 更改基于它的Select OPTION's INDEX(Jquery)
- jQuery val() 返回一个在 select/option 元素上带有 IE8 的数组
- 根据select option元素将表单重定向到不同的URL,但重定向后未选中
- append to select option
- 带有JSON对象的angular select-option值
- 在 Ruby on Rails 中使用带有 If 语句的 Select Option 表单
- 有没有一种方法可以在Chrome中的Select Option元素上添加事件
- 将CSS/HTML双字体颜色转换为SELECT OPTION
- 将文本INPUT字段或SELECT OPTION设为必需字段(HTML5)
- Javascript CSS下拉菜单中的WebDriver Select Option在IDE中工作,而不是在代码中
- 向Select Option添加属性以提取其他数据
- 寻找Javascript函数来禁用指定的select-option字段
- Jquery set select option by .val() does not fire on('cha
- 至少选择了一个select-option的表单验证
- $('select option:selected').text()和Attr.指定的已弃用警告
- 在JQuery中为select-option-selected编写ID选择器的正确语法是什么?
- 在Angular 2中,将默认值设置为select option
- Backbone.js : select option change event trigger click event
- Workaround for bug with 0th <select> option in Mobile
- Select/Option/value on change using ASP and no JavaScript?