gpt4 book ai didi

javascript - Angular JS 传递 ng-repeat $index 作为参数

转载 作者:行者123 更新时间:2023-12-02 17:56:00 25 4
gpt4 key购买 nike

下面的代码有一个 shell 页面index.html 和一个部分 View (当前由两个不同的 Controller 使用)。 AppController 中的硬编码数据被连接到 list.html 部分 View 中并呈现为表格。在 JS 中,我添加了一个 console.log 来查看 Controller 何时被调用。当应用程序加载时当我调用 #/new 时,AppController 会触发,NewController 会触发。但是,当我单击每行旁边的编辑按钮时, EditController 不会被调用。 EditController 应使用 /partials/edit.html View ,但使用单击的行的信息填充字段。因此,此示例中的船员[0] 是 Picard,当您单击该图标时,应预先填充他的数据。我没有收到任何错误,但 EditController 的 View 没有在应该注入(inject)的时候注入(inject)。

JS

angular.module('enterprise', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/", { templateUrl: "/partials/list.html" })
.when("/new", { templateUrl: "/partials/edit.html", controller: "NewController" })
.when("/edit:id", { templateUrl: "/partials/edit.html", controller: "EditController" });
})
//this is the that iterated over in the partial views ng-repeat
function AppController($scope){
$scope.crew = [
{ name: 'Picard', description: 'captain' },
{ name: 'Riker', description: 'number 1' },
{ name: 'Word', description: 'Security' }
];
console.log('app controller hit');
}
function NewController($scope, $location) {
$scope.person = { name: "", description: "" };
$scope.save = function () {
$scope.crew.push($scope.person);
$location.path("/");
}
console.log('new controller hit');
}
function EditController($scope, $location,$routeParams) {
$scope.person = $scope.crew[$routeParams.id];
console.log('edit controller hit');
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular JS Routing</title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"
rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
<a href="#"><h2>Enterprise Crew</h2></a>
<ng-view></ng-view>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

列表.html

<table class="table table-striped" style="width: 250px">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td> <a href="#/new"><i class="glyphicon glyphicon-plus-sign"></i></a>

</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.description}}</td>
<td><a href="#/edit/{{$index}}"><i class="glyphicon glyphicon-edit"></i></a></td>
as ng-repeat loops through I'm trying to go to the edit.hml partial view and populate the text boxes in `edit.html` with the data from the row that was clicked on
</tr>
</tbody>

</table>

编辑.html

<form action="">
<input ng-model="person.name"/ placeholder="Enter the person name">
<input ng-model="person.description"/ placeholder="Enter the description">
<button ng-click="save()" class="btn-primary">Save</button>
</form>

我没有收到任何错误,但我的 EditController 从未被解雇。有人可以告诉我为什么吗?谢谢。

最佳答案

“/edit:id”应改为“/edit/:id”

.when("/edit:id", { templateUrl: "/partials/edit.html", controller: "EditController"});

关于javascript - Angular JS 传递 ng-repeat $index 作为参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20955973/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com