在Angular模型中，你可以在JSON對象和String之間切換值類型嗎？

我有一個工作中的應用程序，我正在努力，需要我根據相關聯的rule.itemType的值顯示各個字段。我遇到的問題是，如果rule.value中的上一個設置值是String對象，而現在顯示的字段需要Object，我無法修改ng-repeat中的模型數據。當我嘗試分配新值時，它會返回：TypeError: Cannot assign to read only property 'course' of ABC123。在Angular模型中，你可以在JSON對象和String之間切換值類型嗎？

我沒有發現，如果該值是一個Object，將其顯示爲String的[object Object]，我是這樣假設來自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，具有角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>

來源

2014-10-31 OpensaurusRex

我更新了代碼以包含問題的根源，這是更改後的itemType，它將顯示正確的輸入但不接受值。另外我加了一個蹦牀。 – OpensaurusRex 2014-11-01 12:19:20

我已經編輯了這個問題，以便更清楚地瞭解當前的主題。我也想說謝謝，我正在閱讀你給我的鏈接，看看它能否幫助我找出問題的答案。我目前正在試驗他們提供的示例代碼等。 – OpensaurusRex 2014-11-01 13:23:36

看到你對此的推文，對我來說似乎很好。不要擔心奇怪的倒退，他們很正常。儘管問題是爲了後代，所以我已經編輯了投票評論和關於新的問題。問題是最好的，堅持解決手頭的問題。 +1 – halfer 2014-11-01 14:28:04

的一種方式，以避免您遇到的問題是要明確設置rule.value rule.itemType變化時。

下面是一個包含了調整工作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 = ''; 
};

來源

2014-11-02 18:17:04

真的不明白你的問題的伴侶......你能請註明你所做的事得到該錯誤，因爲它沒有發生在我身上......（也許你的瀏覽器）

看起來工作得很好，見下文plunkr

'http://plnkr.co/edit/04huDKRSIr2YLtjItZRK?p=preview'

來源

2014-10-31 23:23:33

我已更新並在以下位置附加了更正的版本：http://plnkr.co/edit/bFahZj?p=preview – OpensaurusRex 2014-11-01 12:10:45

在Angular模型中，你可以在JSON對象和String之間切換值類型嗎？

回答

相關問題