Question

我的网络应用中有这个错误。所以，我有一个表单，当我编辑表单时，它不会在视图和服务器上更新。我想要解决的是当我编辑表单时，我想更新视图和服务器。所以，这是我的代码如下。如果有些不对劲，请查看我的代码。提前致谢。任何帮助？

这是我的代码。

var app = angular.module("MyApp", ['ngRoute', 'ui.bootstrap']);
            app.controller('MyCtrl', function($scope, $window, people) {





        people.getUserInfo().then(function (response) {
            $scope.userInfo = response.data;
        });

        $scope.inactive = true;
        $scope.updateUser = function(person) {
            people.updateUser(person);
        };
        $scope.confirmedAction = function(person) {
            var index = $scope.userInfo.lawyers.map(function(e) {
                return e.id;
            }).indexOf(person.id);
            people.confirmUser(person.id).then(function(data){ });
            $scope.userInfo.lawyers.splice(index, 1);
            console.log($scope.userInfo.lawyers);
            $window.location.href = '#/lawyer';
        };
    });


});

约

<div ng-controller="MyCtrl">
    <div ng-repeat="person in userInfo.lawyers | filter : {id: lawyerId}">
        <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="updateUser(person)">Save</button>
        <a class="delete" ng-click="confirmedAction(person);" confirm-click>Confirm</a>
        <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>
        <div class="list-view">
            <form>
                <fieldset ng-disabled="inactive">
                    <legend>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">
                    <br>
                </fieldset>
            </form>
        </div>
    </div>
</div>

我后端的服务

app.factory('people', function ($http) {
    var service = {};
    service.getUserInfo = function () {
        return $http.get('https://api-dev.mysite.com/admin/v1/lawyers');
    };
    service.confirmUser = function (lawyerId) {
        return $http.put('https://api-dev.mysite.com/admin/v1/lawyers/'+lawyerId+'/confirm');
    };
    service.updateUser = function (person) {
        return $http.put('https://api-dev.mysite.com/admin/v1/lawyers/'+ person.id, person);
    };
    return service;
});

的HomeController

  var isConfirmed = false;
  app.controller('HomeController', function($scope, people) {
   if (!isConfirmed) {
    people.getUserInfo().then(function (response) {

        $scope.userInfo = response.data;


     }, function (error) {
        console.log(error)

    });


  }
});

Answer 1

这里有几个问题。

来自服务器的数据未绑定到控制器，这意味着它不会显示在您的视图中。
表单的输入绑定到别名，而不是实际范围的任何成员
在您提交数据更改后，您需要从服务器获取更新
保存数据后，inactive范围值不会更新这意味着在提交表单后，您的“保存”按钮不会隐藏。

第一步是在$scope.userInfo控制器中填充MyCtrl。当您在$scope.userInfo中设置HomeController时HomeController只有$scope.userInfo而非MyCtrl。

您需要更改代码，以便MyCtrl在其自己的范围内设置$scope.userInfo，以便它可以访问数据，如下所示：

app.controller('MyCtrl', function($scope, $window, people) {
    // This function will now be called so that it can get the userInfo
    // from the server and populate into the scope and give the controller
    // access.
    people.getUserInfo().then(function (response) {
        $scope.userInfo = response.data;
    });

   // ...

});

现在，您需要将form的输入实际绑定到范围内的数据。

         <form>
            <fieldset ng-disabled="inactive">
                <legend>Info</legend>
                <b>First Name:</b>
                <input type="text" ng-model="userInfo.lawyers[$index].firstName">
                <br>
                <b>Last Name:</b>
                <input type="text" ng-model="userInfo.lawyers[$index].lastName">
                <br>
                <b>Email:</b>
                <input type="email" ng-model="userInfo.lawyers[$index].email">
                <br>
                <b>Website:</b>
                <input type="text" ng-model="userInfo.lawyers[$index].website">
                <br>
            </fieldset>
        </form>

重要的是要记住Angular需要绑定到$scope中的数据才能在DOM中呈现更改并使用person ng-repeat指令中的person in userInfo.lawyers引用别名person而不是userInfo范围内的实际数据。

提交更改后，您将要使用服务器中的新数据更新列表，包括：

app.controller('MyCtrl', function($scope, $window, people) {

    // ...

    $scope.updateUser = function(person) {

        people.updateUser(person)
            // Now get the new data.
            .then(function() {
                return people.getUserInfo();
            }).then(function (response) {
                // Apply the new data to the scope.
                $scope.userInfo = response.data;
            });

    };

    // ...
});

最后，对于Save按钮问题，您需要确保范围的isactive值适当地设置为何时，并且不希望它出现在DOM中。设置为true时，将值设置为false会隐藏它。编辑按钮已为您切换此值，但您也可以在要执行的功能完成时切换此值。您可以在updateUser函数中执行此操作：

app.controller('MyCtrl', function($scope, $window, people) {

    // ...

    $scope.updateUser = function(person) {

        // Hide the save button
        $scope.inactive = true;

        people.updateUser(person)
            .then(function() {
                return people.getUserInfo();
            }).then(function (response) {
                $scope.userInfo = response.data;
            });

    };

    // ...
});

可以找到AngularJS范围的其他资源here。

表单不会在AngularJS中的视图和服务器上更新？

1 个答案: