Question

我正在学习Angular JS我正在制作一个简单的应用程序，该应用程序应从人员列表开始，当用户点击“更新用户”时，我会做出一个简单的应用程序。它应该被重定向到编辑页面，应该填充数据，这不会发生。这是我的代码：

起始页的HTML：

＆＃13;

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider, $locationProvider) {

    $routeProvider
        .when('/listview',
            {
                controller: 'SimpleController',
                templateUrl: 'Partials/ListView.html'
            })
        .when('/tableview',
            {
                controller: 'SimpleController',
                templateUrl: 'Partials/TableView.html'
            })
        .when('/edit/:id',
            {
                controller: 'EditCtrl',
                templateUrl: 'Partials/Edit.html'
            })
        .otherwise({ redirectTo: '/listview' });
}]);

app.controller('EditCtrl', function ($scope, $location, $routeParams) {
    $scope.details = $scope.persons[$routeParams.id];

    $scope.save = function () {
        $location.path('/');
    };
});

app.controller('SimpleController', function ($scope) {
    $scope.persons = [{ name: 'Tiago', city: 'Lisbon', age: 26 },
                      { name: 'Ecem', city: 'Antalya', age: 24 },
                      { name: 'Derya', city: 'Istambul', age: 24 }
    ];
});

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Galaksiyia - TableView</title>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Index</th>
            <th>Name</th>
            <th>City</th>
            <th>Age</th>
            <th></th>
        </tr>
        <tr ng-repeat="details in persons">
            <td>{{$index}}</td>
            <td>{{details.name}}</td>
            <td>{{details.city}}</td>
            <td>{{details.age}}</td>
            <td><a href="#/edit/{{$index}}">Update User</a></td>
        </tr>
    </table>
</body>
</html>

＆＃13;

编辑页面的Html是：

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Galaksiyia - Edit Page</title>
</head>
<body>
    <form>
        <input type="text" ng-model="details.name" placeholder="Name" /><br />
        <input type="text" ng-model="details.city" placeholder="City" /><br />
        <input type="text" ng-model="details.age" placeholder="Age" /><br />
        <button ng-click="save()">Update User</button>
    </form>
</body>
</html>

＆＃13;

此外，单击“保存”按钮时没有发生任何事情，并且根据代码，用户应重定向到主页面。

Answer 1

快速解决问题的方法是将数据（必须在两个控制器中可用）放入$ rootScope

app.controller('SimpleController', function ($scope) {
    $rootScope.persons = [{ name: 'Tiago', city: 'Lisbon', age: 26 },
                      { name: 'Ecem', city: 'Antalya', age: 24 },
                      { name: 'Derya', city: 'Istambul', age: 24 }
    ];
});

更好的解决方案是编写服务（工厂）并从该服务获取数据。

跳转到另一个视图时，不会填充值

1 个答案: