0

同じjsonデータを含むhtmlページの2つのセクションを表示しようとしていますが、異なる領域に配置されているため、両方を同じコントローラーにラップしたくありません。「Angular Service」でローカル json データを使用して、その概念をうまく実装しました。デモを参照してください。

<div ng-app="testApp">
<div ng-controller="nameCtrl">
    <a href="#" ng-click="addName();">Add New</a>
    <a href="#" ng-click="removeName();">Remove First</a>
    <ul id="first" class="navigation">
        <li ng-repeat="myname in mynames">{{myname.name}}</li>
    </ul>
</div>
<div>
    Lot of things in between
</div>

<ul id="second" class="popup" ng-controller="nameCtrl">
       <li ng-repeat="myname in mynames">{{myname.name}}</li>        
</ul>

JS

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


testApp.service('nameService', function($http) {
    var me = this;

    me.mynames = [
        {
            "name": "Funny1"
        },
        {
            "name": "Funny2"
        },
        {
            "name": "Funny3"
        },
        {
            "name": "Funny4"
        }
    ];

    //How to do
    /*this.getNavTools = function(){
        return $http.get('http://localhost/data/name.json').then(function(result) {
            me.mynames    = result.mynames;
            return result.data;
        });
    };*/



    this.addName = function() {
        me.mynames.push({
            "name": "New Name"
        });
    };


    this.removeName = function() {
            me.mynames.pop();
    };

});

testApp.controller('nameCtrl', function ($scope, nameService) {

    $scope.mynames        =   nameService.mynames;


    $scope.$watch(
        function(){ return nameService },

        function(newVal) {
            $scope.mynames          =  newVal.mynames;
        }
    )

    $scope.addName = function() {
        nameService.addName();
    }



    $scope.removeName = function() {
        nameService.removeName();
    }

});

jsfiddle

次にやりたいことは、json ファイルへの http 要求を作成し、2 つのセクションにデータをロードすることです。追加または削除すると、両方の領域に反映されるはずです。

ポインタや既存のデモは非常に役立ちます。

ありがとう

4

2 に答える 2

1

1 つだけngRepeatが更新される理由は、それらが 2 つの異なる配列にバインドされているためです。

どのようにそれが起こることができますか? これは、 2 回呼び出して、各呼び出しで新しい配列getNavTools()に置き換えmynamesたためです。最終的に、とは の最後に割り当てられた配列で作業しているため、問題が発生しています。addName()removeName()mynames

私はあなたのための修正があります：

testApp.service('nameService', function($http) {
    var me = this;
    me.mynames = []; // me.mynames should not be replaced by new result

    this.getNavTools = function(){
        return $http.post('/echo/json/', { data: data }).then(function(result) {
            var myname_json = JSON.parse(result.config.data.data.json);
            angular.copy(myname_json, me.mynames); // update mynames, not replace it
            return me.mynames;
        });
    };

    this.addName = function() {
        me.mynames.push({
            "name": "New Name"
        });
    };


    this.removeName = function() {
        me.mynames.pop();
    };
});

testApp.controller('nameCtrl', function ($scope, nameService) {

    // $scope.mynames        =   nameService.mynames; // remove, not needed

    nameService.getNavTools().then(function() {
        $scope.mynames = nameService.mynames;
    });

    /* Remove, not needed
    $scope.$watch(
        function(){ return nameService },

        function(newVal) {
            $scope.mynames          =  newVal.mynames;
        }
    );
    */

    $scope.addName = function() {
        nameService.addName();
    };

    $scope.removeName = function() {
        nameService.removeName();
    };
});

http://jsfiddle.net/z6fEf/9/

于 2014-03-13T04:22:06.840 に答える
0

できることは、データを親スコープ (おそらく $rootScope) に配置することです。これにより、両方のビューがトリガーされます。ここで $watch する必要はありません。

 $rootScope.mynames        =   nameService.mynames;

jsFiddleを参照してください

于 2014-03-13T03:47:40.033 に答える