AngularJS PUT有效，POST返回未定義的范圍值

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 ）並將輸入綁定到該對象，因此您將其作為一個整體發送給controller方法。

的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);
}