我是AngularJS的新手。当我有一个用户列表时，我会遇到这个问题，例如：当你点击“user1”时，它会转到user1详细信息页面。但是，当您单击“user2”时，它会显示“user1”详细信息页面而不是“User2”详细信息页面。谁能看到我的代码，我做错了什么？谢谢。 检查下面的图片。
这是我的代码。
<!doctype html>
<html ng-app="Portal">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script data-require="angular-ui-bootstrap@0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<div class="container">
<h3>Portal</h3>
</div>
</div>
<div class="main">
<div class="container">
<div ng-view>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/LawyerController.js"></script>
<!-- Services -->
<script src="js/services/lawyers.js"></script>
</body>
</html>
About.html
<div ng-controller="MyCtrl">
<a class="back" href="#/lawyer">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<a class="delete" ng-click="confirmClick() && confirmedAction()" confirm-click>Confirm</a>
<!-- Our Laywers details -->
<div class="people-view" >
<h2 class="name">{{person.firstName}}</h2>
<h2 class="name">{{person.lastName}}</h2>
<span class="title">{{person.email}}</span>
<span class="date">{{person.website}} </span>
</div>
<!-- the form -->
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="person.firstName">
<br>
<b>Last Name:</b>
<input type="text" ng-model="person.lastName">
<br>
<b>Email:</b>
<input type="email" ng-model="person.email">
<br>
<b>Website:</b>
<input type="text" ng-model="person.website">
</fieldset>
</form>
</div>
</div>
Home.html中
<form name="myForm">
<!-- Search field-->
<label>Search
<input type="text" size="35" ng-model="userSearch">
</label>
</form>
<br/>
<!-- Add a filter -->
<label>Filters</label>
<button type="button" class="btn btn-link">+ Add Filter</button>
<hr>
<legend>Users</legend>
<div ng-controller="MyCtrl" ng-repeat="person in userInfo.lawyers | filter:{id: lawyerId}"> >
<a href="#/lawyer/{{ person.id }}">
<!--<img ng-src="{{person.imageUrl}}"/>-->
<span class="name">{{person.firstName}} </span>
<span class="name">{{person.lastName}} </span>
<p class="title">{{person.email}} </p>
<!--<span class="date">{{person.website}} </span>-->
</a>
</div>
App.js
var app = angular.module("Portal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/lawyer';
}
});
app.config(function ($routeProvider) {
$routeProvider
.when("/lawyer", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
controller: "LawyerController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/lawyer'
});
});
的HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.person);
}, function (error) {
console.log(error)
});
}
});
LawyerController
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
people.getUserInfo().then(function (response) {
$scope.lawyerId = $routeParams.id;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}]);
服务
app.factory('people', ['$http', function($http) {
var userInfo = { //object
getUserInfo: function () {
return $http.get('https://************/*****/**/********');
}
};
return userInfo;
}]);
PS：如果您需要更多解释我的问题，请告诉我。再次感谢您的时间和帮助。
答案 0 :(得分：1)
选项1
您必须设置一个必须获取单个用户信息的功能
var userInfo = { //object
getUserInfo: function () {
return $http.get('https://************/*****/**/********');
},
getSingleUserInfo: function (userId) {
return $http.get('https://************/*****/**/********?userId='+userId);
}
};
将LawyerController更改为如下
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
var userId = $routeParams.id;
people.getSingleUserInfo(userId).then(function (response) {
$scope.userInfo = response.data;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}]);
您现在可以从后端通过参数获得单个用户信息＆＃34; userId＆＃34;
选项2
将所选用户存储在$ rootScope中，如下所示
app.controller('HomeController', function($scope, $rootScope, people, $http) {
$rootScope.selectedUser = null; //Add this line
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.person);
}, function (error) {
console.log(error)
});
}
});
从Home.html更改此行
<a href="#/lawyer/{{ person.id }}">
到
<a href="#/lawyer/{{ person.id }}" ng-click="selectedUser=person">
此时您不需要在About.html视图中进行ng-repeat，因为所选人员位于$ rootScope.selectedUser中。你只需要替换＆＃34; person＆＃34;使用＆＃34; selectedUser＆＃34;
答案 1 :(得分：0)
您需要在范围变量中添加router param id，以便您可以通过html中的该ID对其进行过滤。您可以像这样使用
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
$scope.lawyer_id = $routeParams.id;
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}]);
在 HTML
中<div ng-repeat="person in userInfo.lawyers | filter:{ id: lawyer_id }">