AngularJS模型具有兩個字段

結合我有一個對象像以下：AngularJS模型具有兩個字段

MyObj{ 
    Groups:[{name:"test1": xdata:"[1,2,3]" }, {name:"test2": xdata:"[5,6,7]" }] 
    }

我必須代表在同一頁上的兩個不同的視圖這些值。第一個視圖在textareas中呈現xData和yData，它使用SplitArray指令在文本區域的每一行顯示值1,2,3一個值。

<textarea split-array="" ng-model="group.xdata" > </textarea>

第二視圖在文本框中顯示這些值。外部數據分成三個文本框像下面

<input type="text" ng-model="group.xdata[0]" > 
<input type="text" ng-model="group.xdata[1]" >

以下是SplitArray指令

myModule.directive('splitArray', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModel) { 

      function fromUser(text) { 
       return text.split("\n"); 
      } 

      function toUser(array) {  
       return array.join("\n"); 
      } 

      ngModel.$parsers.push(fromUser); 
      ngModel.$formatters.push(toUser); 
     } 
    }; 
})

當我做在廠景（文本域）的改變，我可以正確地看到第二視圖改變的值（文本框），但當我在view2中進行更改時，更改不會反映在textareas中。當我在文本框的變化上做一個console.log時，我可以看到模型顯示了新的值。我的問題是爲什麼模型更改沒有反映在textareas中，我是否需要對splitArray指令進行一些更改？

來源

2013-08-26 Shamaila Tahir

我不確定，但你可能想檢查http://stackoverflow.com/questions/15363259/watch-not-being-triggered-on-array-change –

請設置一個plunkr或jsfiddle。 – akonsu

這似乎是由設計ngModel不處理對象或數組。在ngModelController code L1085-L1089)中，使用!==運算符進行比較以查看模型值是否已更改。由於$modelValue總是等於更改時的值（xdata），因此ngModelController未檢測到模型的任何更改。

但是，您可以通過在指令中添加一個監視器來解決此問題，以便每當調用監視器時使$ modelValue失效。

scope.$watchCollection(attr.ngModel, function (newValue, oldValue) { 
    ngModel.$modelValue = oldValue; 
});

下面是一個說明此變通辦法一個Plunker：http://plnkr.co/edit/mUL577?p=preview

另一種方法是使用ngChange指令的input領域無效的模型值。但是，這會在指令之間引入耦合。

有上AngularJS的問題是跟蹤這樣的：https://github.com/angular/angular.js/pull/2553

而且，這裏的split-array指令，基本上是做什麼ngList在做什麼。但是，ngList在渲染查看時不尊重分隔符（https://github.com/angular/angular.js/pull/2561）。

來源

2013-08-27 08:02:19 sirhc

AngularJS模型具有兩個字段

回答

相關問題