0

次の例のようなアプリがありますが、ソース データが更新されない理由がわかりません。詳細については、コメントの例を参照してください。これは私が見落としていた些細な問題だと確信しています。

コントローラ

    $scope.items = [
        { id: 1, color: 'red', title: 'car' },
        { id: 2, color: 'blue', title: 'sky' },
        { id: 3, color: 'transparent', title: 'nothing' }
    ]
    $scope.favoriteIds = [1, 2, 3]
    $scope.getItem = function(id) { /* returns an item with given id */ }

最後に、変更する方法は 2 つありますが$scope.items、最初の方法だけが機能します。これは、新しいアイテムが既知のID を取得しないためです。

    $scope.changeData1 = function() {
        $scope.items = [{ id: 666, color: 'ugly', title: 'face' }]
        $scope.favoriteIds = [666]
    }

    $scope.changeData2 = function() {
        $scope.items = [{ id: 1, color: 'ugly', title: 'face' }]
        $scope.favoriteIds = [1]
    }

意見

<h1>Favourite items</h1>

<ul ng-repeat="id in favoriteIds" data-ng-init="item = getItem(id)">
    <li>I like my {{ item.color }} {{ item.title }}</li>
</ul>

<button ng-click="changeData1()">Modify data</button>
<!-- prints: I like my ugly face -->

<button ng-click="changeData2()">Modify nothing</button>
<!-- prints: I like my red car -->

問題は、この 2 番目の方法を使用してデータを変更する必要があることです。

http://jsfiddle.net/4pEpN/7/

4

2 に答える 2

2

私はAngularにも比較的慣れていないので、これを行う簡単な方法があれば、それが何であるかわかりません(残念ながら、Angularのドキュメントはひどいものです)。とにかく、コードの構造を再考することでこれを回避できます (そして、より良いプログラムにもなります)。

あなたのビューでは、ループの各反復中にng-initを呼び出すためgetItemに使用しています。これが問題の原因であり、(明らかに) Angular のパフォーマンス機能が原因です (詳細はthis question )。idng-repeat

基本的に、アプリの起動ng-init時に何かを実行するために except を使用しないでください。それ以外の場合は、現在得られているものになってしまいます。それが属するモデルではなく、ビュー内のロジック( を呼び出す) になります。getItem(id)

代わりに、表示したい正確なng-repeatデータを繰り返すために使用します。前に言ったように、これはコードの再配置を意味します。たとえば、関数を使用して、ユーザーの現在の項目リストをその場で生成できます。このフィドルをチェックしてください: http://jsfiddle.net/4pEpN/19/

私が行ったすべての変更については、そのコードのコメントを参照してください。最も関連性の高いものは次のとおりです。

$scope.favoriteItems = function() {
    var favObjs = [];
    for (var i = 0; i < favoriteIds.length; ++i) {
        favObjs.push(getItem(favoriteIds[i]));
    }
    return favObjs;
};

次に、あなたの見解で：<ul ng-repeat="item in favoriteItems()">

他にも使用できるアプローチはたくさんあります。たとえば、update任意のユーザー入力 (ユーザーのカスタム項目配列の更新を含む) の後に実行する必要がある可能性があるすべてを処理する関数を作成できます。次に、関数でこれを呼び出すことができますchangeData。

于 2013-07-22T21:12:48.523 に答える
2

ng-initテンプレートの初期化にのみ影響するため、適切ではないと思います。getItem(id)それでは、次のように、各属性をフェッチするために あなたを呼び出すだけではどうですか: http://jsfiddle.net/JrvbD/1/

于 2013-07-22T21:13:06.043 に答える