ng-repeat 基于点击的数据切换
ng-repeat data switch based on click
你好,我是 angular js
的新手
是否可以在不 dom 更改的情况下单击更改 ng-repeat 数据?
在此示例中 - 当单击 'names' 选项卡然后显示来自 'names' 数组的名称列表时,与单击 'ids' 选项卡然后内容替换为 ids 列表时相同
是否可以从具有相同 dom 元素的控制器进行管理?
<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
<li ng-repeat="name in names">{{name.name}}</li>
</ul>
var myApp = angular.module('myApp', []);
myApp.controller('testController', function ($scope) {
$scope.names = [
{name : 'nameOne'},
{name : 'nameTwo'},
{name : 'nameThree'},
{name : 'nameFour'},
{name : 'nameFive'}
];
$scope.IDs = [
{id : 'idOne'},
{id : 'idTwo'},
{id : 'idThree'},
{id : 'idFour'},
{id : 'idFive'}
];
});
谢谢
你可以试试这样的
<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
<li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>
在控制器中
//default empty - but you could set it to a default like $scope.myRepeat = $scope.names;
$scope.myRepeat = [];
$scope.changeToName = function(){
$scope.myRepeat = $scope.names;
};
$scope.changeToID = function(){
$scope.myRepeat = $scope.IDs;
};
我只是在 $scope.myRepeat
之间的 ng-repeat 数据中放置了一个不同的范围变量,您可以使用一些点击功能在其中切换数据。您可以将它默认为具有 $scope.names
作为它的值,或者一个空数组,这取决于您希望如何使用它。
FIDDLE - http://jsfiddle.net/8s4afddv/2/
你可以这样做:
<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
<li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>
var myApp = angular.module('myApp', []);
myApp.controller('testController', function ($scope) {
$scope.prop = "name";
$scope.lists = function() {
var list;
if ($scope.list === "names") {
$scope.prop = "name";
list = [
{name : 'nameOne'},
{name : 'nameTwo'},
{name : 'nameThree'},
{name : 'nameFour'},
{name : 'nameFive'}
];
}
} else if ($scope.list === "id") {
$scope.prop = "id";
list = [
{id : 'idOne'},
{id : 'idTwo'},
{id : 'idThree'},
{id : 'idFour'},
{id : 'idFive'}
];
}
return list;
});
我就是这样做的。如果我有更多时间将整个东西构建到它自己的指令中(顶部的按钮仍然让我感到困扰),但这应该让你开始(自从我使用 angular 以来已经有一段时间了,抱歉!)
http://jsfiddle.net/8s4afddv/5/
var myApp = angular.module('myApp', []);
myApp.controller('testController', function ($scope) {
$scope.activeList = [];
$scope.change = function(t){
$scope.activeList = $scope[t];
};
$scope.names = [
{name : 'nameOne'},
{name : 'nameTwo'},
{name : 'nameThree'},
{name : 'nameFour'},
{name : 'nameFive'}
];
$scope.IDs = [
{id : 'idOne'},
{id : 'idTwo'},
{id : 'idThree'},
{id : 'idFour'},
{id : 'idFive'}
];
})
.directive('myList', function() {
return {
restrict: 'E',
transclude: true,
template: '<ul><li ng-repeat="name in activeList">{{ (name.name || name.id) }}</li></ul>'
};
});
HTML:
<div ng-app="myApp" ng-controller="testController">
<div class="select" ><span class="active" ng-click="change('names')">Names</span> <span ng-click="change('IDs')">ID</span></div>
<my-list>
</my-list>
</div>
你好,我是 angular js
的新手是否可以在不 dom 更改的情况下单击更改 ng-repeat 数据?
在此示例中 - 当单击 'names' 选项卡然后显示来自 'names' 数组的名称列表时,与单击 'ids' 选项卡然后内容替换为 ids 列表时相同
是否可以从具有相同 dom 元素的控制器进行管理?
<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
<li ng-repeat="name in names">{{name.name}}</li>
</ul>
var myApp = angular.module('myApp', []);
myApp.controller('testController', function ($scope) {
$scope.names = [
{name : 'nameOne'},
{name : 'nameTwo'},
{name : 'nameThree'},
{name : 'nameFour'},
{name : 'nameFive'}
];
$scope.IDs = [
{id : 'idOne'},
{id : 'idTwo'},
{id : 'idThree'},
{id : 'idFour'},
{id : 'idFive'}
];
});
谢谢
你可以试试这样的
<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
<li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>
在控制器中
//default empty - but you could set it to a default like $scope.myRepeat = $scope.names;
$scope.myRepeat = [];
$scope.changeToName = function(){
$scope.myRepeat = $scope.names;
};
$scope.changeToID = function(){
$scope.myRepeat = $scope.IDs;
};
我只是在 $scope.myRepeat
之间的 ng-repeat 数据中放置了一个不同的范围变量,您可以使用一些点击功能在其中切换数据。您可以将它默认为具有 $scope.names
作为它的值,或者一个空数组,这取决于您希望如何使用它。
FIDDLE - http://jsfiddle.net/8s4afddv/2/
你可以这样做:
<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
<li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>
var myApp = angular.module('myApp', []);
myApp.controller('testController', function ($scope) {
$scope.prop = "name";
$scope.lists = function() {
var list;
if ($scope.list === "names") {
$scope.prop = "name";
list = [
{name : 'nameOne'},
{name : 'nameTwo'},
{name : 'nameThree'},
{name : 'nameFour'},
{name : 'nameFive'}
];
}
} else if ($scope.list === "id") {
$scope.prop = "id";
list = [
{id : 'idOne'},
{id : 'idTwo'},
{id : 'idThree'},
{id : 'idFour'},
{id : 'idFive'}
];
}
return list;
});
我就是这样做的。如果我有更多时间将整个东西构建到它自己的指令中(顶部的按钮仍然让我感到困扰),但这应该让你开始(自从我使用 angular 以来已经有一段时间了,抱歉!)
http://jsfiddle.net/8s4afddv/5/
var myApp = angular.module('myApp', []);
myApp.controller('testController', function ($scope) {
$scope.activeList = [];
$scope.change = function(t){
$scope.activeList = $scope[t];
};
$scope.names = [
{name : 'nameOne'},
{name : 'nameTwo'},
{name : 'nameThree'},
{name : 'nameFour'},
{name : 'nameFive'}
];
$scope.IDs = [
{id : 'idOne'},
{id : 'idTwo'},
{id : 'idThree'},
{id : 'idFour'},
{id : 'idFive'}
];
})
.directive('myList', function() {
return {
restrict: 'E',
transclude: true,
template: '<ul><li ng-repeat="name in activeList">{{ (name.name || name.id) }}</li></ul>'
};
});
HTML:
<div ng-app="myApp" ng-controller="testController">
<div class="select" ><span class="active" ng-click="change('names')">Names</span> <span ng-click="change('IDs')">ID</span></div>
<my-list>
</my-list>
</div>