javascript - 如何在AngularJS中传递参数
问题描述
我在 Angular JS 中有一个产品列表,当我单击某个项目的链接时,我想将该产品的索引发送到一个新页面,在该页面中获取该项目的所有详细信息(类别、价格等)项目索引。这些信息将取自已在 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>
解决方案
<!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>
推荐阅读
- javascript - 将颜色更改应用于图像作为叠加层,保持原始纹理/着色器 Javascript
- python - SESSION_COOKIE_SECURE=Django 2.2 中的 True 将管理员登录重定向到自身
- sql - 两个具有相同内容的表会破坏数据规范化吗?
- java - 查找最小长度为 2 个字符的所有常见子字符串
- ms-access - 错误 3464:使用 Allen Browne 的 Concat 函数的条件表达式中的数据类型不匹配
- c++ - 如何使用 Shader Storage Buffer 和 std430 建立 glBindBufferRange() 偏移量?
- javascript - 在php文件中包含js
- python - 如何使用 groupby 选择条件行?
- c# - 基于坐标c#在pdf中突出显示元素
- python - 从 Github 导入:如何修复 ImportError