如何在AngularJs中通过索引访问重复项的数组数据
如何在AngularJs中通过索引访问重复项的数组数据
提问于 2018-08-30 02:53:11
我是AngularJs新手。我有一个显示ng重复的学生姓名的主视图。当你点击每个名字时，它必须显示该学生的详细信息。
但是，当我单击每个名字时，视图不会显示该特定学生的详细信息。
这是我的个人观点：
<a ng-href="#!/info/{{$index}}">
<div class="info" ng-repeat="user in users | orderBy: order | filter:expression">
<div class="img">
<img ng-src="{{user.image}}">
</div>
<div class="text">
<h3 style="color: #007acc;"> Student Details For:</h3>
<h2>{{user.name}}</h2>
</div>
</div>
</a>这是我的信息视图：
<div class="text" style="padding: 0 5%;">
<p><span>Name:</span> {{info.name}}</p>
<p><span>Room:</span> {{info.room}}</p>
<p><span>Cell:</span> {{info.cell}}</p>
<p><span>Guardian Cell:</span> {{info.nokcell}}</p>
<p><span>Guardian Email:</span> {{info.nokemail}}</p>
<br>
</div> 下面是我的js：
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when("/", {
controller: "mainController",
templateUrl: "views/home.html"
})
.when("/info/:id", {
controller: "infoController",
templateUrl: "views/info.html"
})
.otherwise({
redirectTo: "/"
})
});
var data = [
{
name: " Andrea Toe",
room: 12,
cell: "0724884888",
nokcell: "0724884975",
nokemail: " ",
image: "images/female.jpg"
},
{
name: "Relebogile Maile",
room: 3,
cell: "07248844322",
nokcell: "24 Old Pretoria Rd, Midrand",
nokemail: " ",
image: "images/female.jpg"
},
{
name: "Siyabonga Ntshangase",
room: 1,
cell: "0753284888",
nokcell: "0853884888",
nokemail: " ",
image: "images/male.jpeg"
}
];
app.controller("mainController", function($scope){
$scope.users = data;
});
app.controller('infoController', ['$scope', 'users', '$routeParams', function($scope, users, $routeParams) {
users.success(function(data) {
$scope.info = data[$routeParams.id];
});
}]);请帮帮我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-30 03:04:56
$index只能从ng-repeat内部到达。
将ng-repeat移到a-tag中
<a ng-repeat="user in users | orderBy: order | filter:expression" ng-href="#!/info/{{$index}}">
<div class="info">
<div class="img">
<img ng-src="{{user.image}}">
</div>
<div class="text">
<h3 style="color: #007acc;"> Student Details For:</h3>
<h2>{{user.name}}</h2>
</div>
</div>
</a>然后，您应该在加载控制器时直接设置$scope.info，而不是等待来自'users'的成功函数(这是什么？)
像这样试一下
app.controller('infoController', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.info = data[$routeParams.id];
}]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52084325
复制相关文章
相似问题