在Angular模型中，可以在JSON对象和字符串之间切换值类型吗

In Angular models, can you switch value type between JSON Object and String?

本文关键字：之间 字符串 类型 对象 模型 Angular JSON      更新时间：2023-09-26

我正在处理一个应用程序，该应用程序要求我根据关联的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()函数，如果更改，它将用新的String对象替换rule.value。尽管这个方向有效，但如果我需要做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>

避免问题的一种方法是在rule.itemType更改时显式设置rule.value。

这是一个包含调整的工作plunker：http://plnkr.co/edit/rMfeBe?p=preview

以下内容已添加到选择中：

ng-change="typeChange(rule)"

控制器中添加了以下内容：

$scope.typeChange = function(rule) {
    if (rule.itemType === 'CS') rule.value = {};
    if (rule.itemType === 'SA') rule.value = '';
};

真的不理解你的问题，伙计。。。你能具体说明你是怎么得到这个错误的吗？因为它没有发生在我身上。（也许还有你所在的浏览器）

似乎工作得很好，见下面的plunkr

'http://plnkr.co/edit/04huDKRSIr2YLtjItZRK?p=preview'
相关文章：