如何在 AngularJS 中传递参数
How to pass a parameter in AngularJS
我在 Angular JS 中有一个产品列表,当我单击某个项目的 link 时,我想将该产品的索引发送到一个新页面,在那里可以获取所有该项目的详细信息(类别、价格等)基于项目索引。这些信息将从 javascript 中定义的同一个数组中获取。你有什么建议吗?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="productsCtrl">
<ul id="products">
<li ng-repeat="entry in entries">
<a href="#!{{$index}}">{{entry.title}}</a>
<span ng-click="removeItem($index)" style="cursor: pointer;"
>x</span
>
</li>
</ul>
</div>
<script>
angular
.module("myApp", [])
.controller("productsCtrl", function($scope) {
$scope.entries = [
{
title: "Laptop",
category: "Category01",
price: 233
},
{
title: "Phone",
category: "Category02",
price: 122
},
{
title: "Mouse",
category: "Category03",
price: 10
}
];
$scope.removeItem = function(index) {
$scope.entries.splice(index, 1);
};
});
</script>
</body>
</html>
我会建议从数据中找到一个唯一值,大多数数据集都有一个用于这种情况的 ID。然后你可以使用 Javascript find 来检索你想要显示的条目对象。您的 url 可能看起来像 #!Laptop 或 #1?title=Laptop
$scope.foundEntry = $scope.entries.find(function(listEntry) {
// find the entry from entries that has the matching title
return listEntry.title === decodeURI($scope.selectedValue);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div ng-app="myApp" ng-controller="productsCtrl" class="container p-3">
<ul class="list-group" id="products">
<li class="list-group-item">
<a class="font-weight-bold" href="#">Home</a>
</li>
<li class="list-group-item list-group-item-action" ng-repeat="entry in entries">
<a href="#!category/{{$index}}">{{entry.title}}</a>
<button ng-click="removeItem($index)" class="btn btn-sm font-weight-bold float-right btn-outline-danger">x</button>
</li>
</ul>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']).controller("productsCtrl", function ($scope, $route, $routeParams) {
$scope.active_category = null;
if ($routeParams && $routeParams['index']) {
$scope.active_category = $scope.entries[$routeParams['index']];
}
$scope.entries = [
{
title: "Laptop",
category: "Category01",
price: 233
},
{
title: "Phone",
category: "Category02",
price: 122
},
{
title: "Mouse",
category: "Category03",
price: 10
}
];
$scope.removeItem = function (index) {
$scope.entries.splice(index, 1);
};
});
app.config(function ($routeProvider) {
$routeProvider
.when("/category/:index", {
template: `<div class="card mt-3" ng-if="active_category">
<div class="card-header">{{active_category.title}}</div>
<div class="card-body">
<ul>
<li><b>Category</b> : {{active_category.category}}</li>
<li><b>Price</b> : {{active_category.price}}</li>
</ul>
</div>
</div>`,
controller: "productsCtrl"
})
.otherwise({
redirectTo: '/'
});
});
</script>
</body>
</html>
我在 Angular JS 中有一个产品列表,当我单击某个项目的 link 时,我想将该产品的索引发送到一个新页面,在那里可以获取所有该项目的详细信息(类别、价格等)基于项目索引。这些信息将从 javascript 中定义的同一个数组中获取。你有什么建议吗?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="productsCtrl">
<ul id="products">
<li ng-repeat="entry in entries">
<a href="#!{{$index}}">{{entry.title}}</a>
<span ng-click="removeItem($index)" style="cursor: pointer;"
>x</span
>
</li>
</ul>
</div>
<script>
angular
.module("myApp", [])
.controller("productsCtrl", function($scope) {
$scope.entries = [
{
title: "Laptop",
category: "Category01",
price: 233
},
{
title: "Phone",
category: "Category02",
price: 122
},
{
title: "Mouse",
category: "Category03",
price: 10
}
];
$scope.removeItem = function(index) {
$scope.entries.splice(index, 1);
};
});
</script>
</body>
</html>
我会建议从数据中找到一个唯一值,大多数数据集都有一个用于这种情况的 ID。然后你可以使用 Javascript find 来检索你想要显示的条目对象。您的 url 可能看起来像 #!Laptop 或 #1?title=Laptop
$scope.foundEntry = $scope.entries.find(function(listEntry) {
// find the entry from entries that has the matching title
return listEntry.title === decodeURI($scope.selectedValue);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div ng-app="myApp" ng-controller="productsCtrl" class="container p-3">
<ul class="list-group" id="products">
<li class="list-group-item">
<a class="font-weight-bold" href="#">Home</a>
</li>
<li class="list-group-item list-group-item-action" ng-repeat="entry in entries">
<a href="#!category/{{$index}}">{{entry.title}}</a>
<button ng-click="removeItem($index)" class="btn btn-sm font-weight-bold float-right btn-outline-danger">x</button>
</li>
</ul>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']).controller("productsCtrl", function ($scope, $route, $routeParams) {
$scope.active_category = null;
if ($routeParams && $routeParams['index']) {
$scope.active_category = $scope.entries[$routeParams['index']];
}
$scope.entries = [
{
title: "Laptop",
category: "Category01",
price: 233
},
{
title: "Phone",
category: "Category02",
price: 122
},
{
title: "Mouse",
category: "Category03",
price: 10
}
];
$scope.removeItem = function (index) {
$scope.entries.splice(index, 1);
};
});
app.config(function ($routeProvider) {
$routeProvider
.when("/category/:index", {
template: `<div class="card mt-3" ng-if="active_category">
<div class="card-header">{{active_category.title}}</div>
<div class="card-body">
<ul>
<li><b>Category</b> : {{active_category.category}}</li>
<li><b>Price</b> : {{active_category.price}}</li>
</ul>
</div>
</div>`,
controller: "productsCtrl"
})
.otherwise({
redirectTo: '/'
});
});
</script>
</body>
</html>