【发布时间】：2014-12-28 08:46:13
【问题描述】：
我正在处理一个应用程序，它要求我根据关联的rule.itemType 的值显示各种字段。我遇到的问题是，如果rule.value 中的先前设置值是String 对象，现在正在显示需要Object 的字段，我将无法修改ng-repeat 中的模型数据。当我尝试分配新值时，它返回：TypeError: Cannot assign to read only property 'course' of ABC123。
我确实发现如果该值为Object，它会将其显示为[object Object] 的String，我假设它来自我正在阅读的Object.prototype.toString() 函数，如果更改将替换rule.value 带有一个新的 String 对象。即使这个方向有效，但如果我需要将String 发送到Object，我们最终会回到上述问题。
我附上了示例代码来演示我在下面尝试做的事情以及一些数据。我还分叉、修改和链接了回复者的 Plunker，以便您可以看到它的实际效果：
http://plnkr.co/edit/v4gSyc6MbYeGGyJppvnc?p=preview
JavaScript：
var app = angular.module('plunker', []);
app.controller('appCtrl', function ($scope) {
$scope.rules = [
{id: 1, itemType: 'CS', value: {course: 'ABC', number: '123'}},
{id: 2, itemType: 'SA', value: 'ABC123'}
];
});
HTML，带有 Angular v1.3.0：
<body>
<div ng-controller="appCtrl as app">
<div ng-repeat="rule in rules">
Rule {{$index+1}}
<!-- Change the itemType for the rule -->
<select ng-model="rule.itemType">
<option value="SA">String</option>
<option value="CS">Object</option>
</select>
<!-- Fields shown if rule.itemType (SA: String, CS: Object) -->
<input type="text" ng-if="rule.itemType === 'SA'" ng-model="rule.value" />
<span ng-if="rule.itemType === 'CS'">
<input ng-model="rule.value.course" />
<input ng-model="rule.value.number" />
</span>
</div>
</div>
</body>
更新 1：
添加了 Ryan Randall 的建议以使用 ng-change='changeType(rule)，它提供了我正在寻找的适当行为，例如下面的 plunker。
http://plnkr.co/edit/bFahZj?p=preview
JavaScript 更改：
// Contributed by: http://stackoverflow.com/a/26702691/949704
$scope.typeChange = function (rule) {
if (rule.itemType === 'CS') rule.value = {};
if (rule.itemType === 'SA') rule.value = '';
};
HTML 更改：
<!-- Change the itemType for the rule -->
<select ng-model="rule.itemType" ng-change="changeType(rule)">
<option value="SA">String</option>
<option value="CS">Object</option>
</select>
【问题讨论】：
-
我更新了代码以包含问题的根源，即 itemType 在更改时会显示正确的输入但不接受值。我还添加了一个 plunker。
-
我已经编辑了这个问题，以便更清楚地了解手头的主题。我还想说谢谢，我正在阅读您给我的链接，看看它是否可以帮助我找出问题的答案。我目前正在试验他们提供的示例代码等。
-
看到你的推文，我觉得很好。不要担心奇怪的反对票，他们很正常。不过，问题是留给后代的，所以我已经编辑了投票评论和关于成为新人的内容。问题最好简洁并坚持手头的问题。 +1
-
啊，好的，谢谢你的提示！以后我会牢记这一点。
标签： javascript json angularjs type-conversion angular-ngmodel