Question

我是angularjs的新手。我想根据点击数据ul。

更新个人资料

怎么做？

html：

<div ng-app="test">
    <div ng-controller="cont">
        <ul>
            <li ng-repeat="(key, val) in data">{{val.name}}</li>
        </ul>
        <ul id="profile-ul">
            <li>profile should repeat here</li>
        </ul>    
    </div>    
</div>

JS：

var data = [{ 
    'name' : 'A',
    'profile' : ['A 1','A 2','A 3']
},
{ 
    'name' : 'B',
    'profile' : ['B 1','B 2','B 3']
}
]
var angApp = angular.module('test',[]);
angApp.controller('cont', ['$scope', function($scope){
    $scope.data = data;
}])

此处js fiddle可以使用。

Answer 1

这是：

http://jsfiddle.net/hh5kwf4n/

var data = [{ 
    'name' : 'A',
    'profile' : ['A 1','A 2','A 3']
},
{ 
    'name' : 'B',
    'profile' : ['B 1','B 2','B 3']
}
]
var angApp = angular.module('test',[]);
angApp.controller('cont', ['$scope', function($scope){
    $scope.data = data;
    $scope.profile = ['A','B','C'];    

    $scope.updateProfile = function(key) {
        $scope.selectedProfile = data[key];
    };
}])

和HTML

<div ng-app="test">
    <div ng-controller="cont">
        <ul>
            <li ng-repeat="(key, val) in data" ng-click="updateProfile(key)">{{val.name}}</li>
        </ul>
        <ul id="profile-ul">
            <li ng-repeat="item in selectedProfile.profile">{{item}}</li>
        </ul>    
    </div>    
</div>

解释：通过在我们的视图中放置{{selectedProfile.name}}，我们告诉视图用任何给定变量的值替换它，这是我们的“模型”

下一步...通过将ng-click="updateProfile(key)"添加到li标记，我们确保每次点击li标记时，都会调用updateProfile函数，并且当前元素的键将被传递给它。

最后，在我们的控制器中，我们有函数updateProfile，它基于传递给它的键，更新模型的值 - selectedProfile。

现在......只要模型更新，视图就会自动更新，就是这样：）

Answer 2

想出我的自我：

html：

<div ng-app="test">
    <div ng-controller="cont">
        <ul>
            <li ng-click="updateKey(val)" ng-repeat="(key, val) in data">{{val.name}}</li>
        </ul>
        <ul id="profile-ul">
            <li ng-repeat="val in profile">{{val}}</li>
        </ul>    
    </div>    
</div>

JS：

var data = [{ 
    'name' : 'A',
    'profile' : ['A 1','A 2','A 3']
},
{ 
    'name' : 'B',
    'profile' : ['B 1','B 2','B 3']
}
]
var angApp = angular.module('test',[]);
angApp.controller('cont', ['$scope', function($scope){
    $scope.data = data;
    $scope.updateKey = function(data){
        $scope.profile = data.profile;
    }
}])

这里是jsfiddle

根据第一个视图的选择更新其他视图？

2 个答案: