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

标签 javascript json angularjs type-conversion angular-ngmodel

我正在开发一个应用程序,它要求我根据关联的 rule.itemType 的值显示各种字段。我遇到的问题是,如果 rule.value 中的先前设置值是 String,我无法修改 ng-repeat 中的模型数据 对象现在显示需要对象 的字段。当我尝试分配新值时,它返回:TypeError:无法分配给 ABC123 的只读属性“course”

我确实发现,如果该值是一个Object,它会将其显示为[object Object]String,我就是假设来 self 正在阅读的 Object.prototype.toString() 函数,如果更改,将用新的 String 替换 rule.value目的。即使这个方向有效,如果我需要对 Object 执行 String 操作,我们最终会回到上述问题。

我附上了示例代码来演示我在下面尝试执行的操作以及一些数据。我还 fork 、修改并链接了回复者的 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。

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

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

ng-change="typeChange(rule)"

并且以下内容已添加到 Controller 中:

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

关于javascript - 在 Angular 模型中,可以在 JSON 对象和字符串之间切换值类型吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26684699/

相关文章:

javascript - jQuery 动态选择内容

javascript - 如果窗口不够大,则缩放(缩小)内容

javascript - Laravel @include 通过 ajax 的 Blade View

jquery - 用于 ajax/json 功能的 jQuery 精简版本

javascript - 只读取 JavaScript 中的第一个值

jquery - JavaScript : How can i get a key value inside an array of a JSON object

javascript - 更改 Angular 图中的 y 轴值

javascript - Google API 客户端 ID 未授权

angularjs - AngularJS中的全局错误处理

css - 如何将滚动条添加到具有多个 tbody 的动态表