备选方案＃1

Question

使用代码我可以更新列出的用户，但添加新用户不起作用。始终未定义新项目输入的范围。它确实提交了一些内容，但没有填写表格中的值。例如console.log($scope.newMail)返回undefined。

<script>
function UsersController($scope, $http, $location) {
    $http.get('/users').success(function(users) {
        $scope.users = users;
    });

    $scope.addUser = function(user) {
        var user = {
            name:   $scope.newName, // with hardcoding values here it does work
            email:      $scope.newMail // but with newValues, both stay null always
        };
        console.log(user); // returns undefined values
        $http.post('/users', user);
    }

    $scope.updateUser = function(user) {
        $http.put('/users/'+user.id, user);
    }
}
</script>


<section ng-controller="UsersController">

    <!-- ng-repeat -->
    <div ng-repeat="user in users">
        <form ng-submit="updateUser(user)">

            <input type="hidden" ng-model="user.id" value="{{ user.id }}"/>
            <input type="text" value="{{ user.name }}" ng-model="user.name" />
            <input type="email" value="{{ user.email }}" ng-model="user.email" />

            <button type="submit" />
        </form>


        <section ng-show="toggleForm">

            <form ng-submit="addUser(user)">
                <input type="text" ng-model="newName" required />
                <input type="email" ng-model="newMail" required />

                <button type="submit" ng-click="toggleForm = !toggleForm"/>
            </form>

        </section>

        <a ng-click="toggleForm = !toggleForm"><p>New user</p></a>

    </div>
</section>

无法弄清楚出了什么问题。我错过了什么？

我实施了解决方案＃3：

TypeError: Cannot set property 'mail' of undefined
    at setter (//urlassets/app.js:3:26728)
    at extend.assign (//urlassets/app.js:5:29229)
    at $setViewValue (//urlassets/app.js:6:5077)
    at //urlassets/app.js:4:31686
    at Scope.$eval (//urlassets/app.js:4:9722)
    at Scope.$apply (//urlassets/app.js:4:10068)
    at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
    at HTMLInputElement.listener (//urlassets/app.js:4:31663)
    at //urlassets/app.js:1:29072
    at forEach (//urlassets/app.js:1:8278)

看起来像是：https://www.dropbox.com/s/3nhkhcsz3g6d6iy/test.mov

Answer 1

我认为你的问题在于范围继承。所以应该有两种选择：

备选方案＃1

使用对象（例如 newuser ）并将输入绑定到该对象，以便将其作为整体发送到控制器方法。

HTML

<form ng-submit="addUser(newuser)">
    <input type="text" ng-model="newuser.name" required />
    <input type="email" ng-model="newuser.mail" required />

    <button type="submit" ng-click="toggleForm = !toggleForm"/>
</form>

JS

$scope.addUser = function(user) {
    $http.post('/users', user);
}

备选方案＃2

我怀疑该表单正在创建一个新的子范围，因此这将是该值返回未定义的原因。您可以显式绑定到$ parent范围，以便控制器中的方法可以看到它。

<form ng-submit="addUser(user)">
    <input type="text" ng-model="$parent.newName" required />
    <input type="email" ng-model="$parent.newMail" required />

    <button type="submit" ng-click="toggleForm = !toggleForm"/>
</form>

备选方案＃3

HTML

<form ng-submit="addUser(newuser[$index])">
    <input type="text" ng-model="newuser[$index].name" required />
    <input type="email" ng-model="newuser[$index].mail" required />

    <button type="submit" ng-click="toggleForm = !toggleForm"/>
</form>

JS

$scope.newuser = {};
$scope.addUser = function(user) {
    $http.post('/users', user);
}

AngularJS PUT工作，POST返回未定义的范围值

1 个答案:

备选方案＃1

备选方案＃2

备选方案＃3