AngularJSで配列を同期させる

私はAngularJSコントローラ内で配列を同期させる方法を探しています。AngularJSで配列を同期させる

例：

var input = [1]; 
var synchArray = DatabindToModifiedInput() 
// synchArray is something like this: 
// [{name:someObject}, {name:inputElement, Id:1}] 

input.push(2); 
// synchArray should be updated automatically: 
// [{name:someObject}, {name:inputElement, Id:1}, {name:inputElement, Id:2}]

明らかに私は$watch ESを登録し、synchArrayときinput変更を修正するが、それは非常に、角のように感じることはありませんでした。

質問：私はinput -arrayに適用することができ、フィルタを書くように誘惑しています

。しかし、これはまだコントローラ/サービス内でデータを一緒にバインドする明白な方法が欠けているように感じます。

これにngRepeatやデータ結合メカニズムを利用する方法はありますか？それとも私はまったく違う方法でこれにアプローチするべきでしょうか？

出典

2016-05-20 H W

なぜあなたはこれをやろうとしている、最終目標は何ですか？あなたがどこに行くのか分かっていれば、より良いアプローチを提案できるかもしれません。 –

'synchArray'を' ng-repeat'でビューにバインドしたいと思います。このデータはいくつかの異なるサービスによって管理されている配列に依存していますが、データをあらかじめマージするだけで、基本的に同じようにいくつかのng-repeatsを使用するのは間違っていました。 –

Jacob Relkinのthisポストに示すように、拡張配列オブジェクトを作成する必要があります。

このようにして、何かが起こったときに、ただ1つの配列やイベント以上のことをすることができます。

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 

 
    $scope.myClonedArray = []; 
 
    $scope.myExtendedArray; 
 

 
    // Extended array type 
 
    function EventedArray(handler) { 
 
    this.stack = []; 
 
    this.mutationHandler = handler || function() {}; 
 
    this.setHandler = function(f) { 
 
     this.mutationHandler = f; 
 
    }; 
 
    this.callHandler = function(event, obj) { 
 
     if (typeof this.mutationHandler === 'function') { 
 
     this.mutationHandler(event, obj); 
 
     } 
 
    }; 
 
    this.push = function(obj) { 
 
     this.stack.push(obj); 
 
     this.callHandler('push', obj); 
 
    }; 
 
    this.pop = function() { 
 
     var obj = this.stack.pop(); 
 
     this.callHandler('pop', obj); 
 
     return obj; 
 
    }; 
 
    this.getArray = function() { 
 
     return this.stack; 
 
    } 
 
    } 
 

 
    var handler = function(event, item) { 
 
    console.log(event, item); 
 
    if (event === 'push') { 
 
     $scope.myClonedArray.push(item); 
 
    } else if (event === 'pop') { 
 
     $scope.myClonedArray.pop(); 
 
    } 
 
    }; 
 

 
    $scope.myExtendedArray = new EventedArray(handler); 
 

 
    //or 
 

 
    // $scope.myExtendedArray = new EventedArray(); 
 
    // $scope.myExtendedArray.setHandler(handler); 
 

 
    $scope.addItem = function() { 
 
    $scope.myExtendedArray.push($scope.inputValue); 
 
    }; 
 

 
    $scope.popItem = function() { 
 
    $scope.myExtendedArray.pop(); 
 
    }; 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<html ng-app="myApp"> 
 

 
<body ng-controller="MyCtrl"> 
 

 
    <input type="text" ng-model="inputValue" /> 
 
    <button ng-click="addItem()">Add</button> 
 
    <button ng-click="popItem()">Pop</button> 
 

 
    <p>Custom Array</p> 
 
    <ul> 
 
    <li ng-repeat="item in myExtendedArray.stack track by $index"> 
 
     {{item}} 
 
    </li> 
 
    </ul> 
 

 
    <p>Cloned Array</p> 
 
    <ul> 
 
    <li ng-repeat="item in myClonedArray track by $index"> 
 
     {{item}} 
 
    </li> 
 
    </ul> 
 

 
</body> 
 

 

 
</html>

出典

2016-05-20 08:00:06

AngularJSで配列を同期させる

答えて

関連する問題