ng-form 提交了一个空对象，但应该修改对象答案

【问题标题】：ng-form submitted an empty object but object should be modifiedng-form 提交了一个空对象，但应该修改对象
【发布时间】：2014-01-28 22:09:01
【问题描述】：

更新

控制器

chitchatApp.controller('chitchatCtrl', ['$scope', function($scope) {

    $scope.users = [

    {'username': 'John'},
    {'username': 'Dan'},
    {'username': 'Judy'}, 
    {'username': 'Michael'},
    {'username': 'Rebecca'},
    {'username': 'Macy'},
    {'username': 'Ross'}
    ];

    name = {'username': ''};
  //name = {}; 


    $scope.createuser = function createuser() { 
        $scope.users.push(name);
    };
}]);

html

<body ng-app="chitchatApp" ng-controller="chitchatCtrl">

<!-- users that are currently log on will be here -->
<div class="users_container">
    <div class="span2">
        Here are the users that are currently log in
        <li ng-repeat="user in users">
            {{user.username}}
        </li>
    </div>
</div>

<form class="simple-form" ng-submit="createuser()">
Log in As: 
    <input type="text" ng-model="name.username">
    <input type="submit"/>
</form>


</div>
</body>

这是我用angular js构建的表单

<form class="simple-form" ng-submit="createuser()">
Log in As: 
    <input type="text" ng-model="name.username">
    <input type="submit"/>
</form>

ng-model 绑定到我的控制器中的一个空对象

name = {};

我也试过改成这个

name = {'username': ''};

我的 $scope 上有一个像这样的方法

$scope.createuser = function createuser() { 
        $scope.users.push(name);
    };

$scope.users 是一个包含对象的数组，每个对象都具有相同的“用户名”属性

我在使用 ng-repeat 的用户中循环遍历用户。

当我点击提交时，有一个新的 li 但对象中的内容消失了。我没有设置数据库。它的纯 javascript 和 angular js。

表单中的模型对象是否没有被修改或者我是否成功但它立即消失了，我注意到当我将一个对象推入一个数组（显示为 ng-repeat）然后刷新然后它消失了，因为它没有持久化？我没有设置数据库？

【问题讨论】：

请展示控制器的完整相关部分和HTML代码。

标签： javascript forms angularjs

【解决方案1】：

ng-model 指令绑定到 $scope 的属性。因此，您需要使 name 变量成为该范围的一部分，使用：

$scope.name = {'username': ''}; 

$scope.createuser = function createuser() { 
    var safeCopy = angular.copy($scope.name);
    $scope.users.push(safeCopy);
};

【讨论】：

嗯？你什么意思？ jsfiddle.net/qwertynl/94jZJ/3
$scope.users.push(angular.copy($scope.name));是必要的。否则绑定将保持活动状态，导致新插入的项目被修改。
@qwertynl 好点。错过了关于 ng-model 隐式定义 $scope 属性的部分（如果尚未定义）。
@Bart 所以最后你的回答并没有真的回答任何问题。很抱歉 :-( 奇怪的是，虽然 OPs 代码没有完全工作。我的回答做了一些小的修改以使其应该按预期工作。
我更新了我的代码以检查空输入 @Bart jsfiddle.net/qwertynl/AvUzd

【解决方案2】：

试试这个（没有本地存储）：

var app = angular.module('myapp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.users = [

    {
        'username': 'John'
    }, {
        'username': 'Dan'
    }, {
        'username': 'Judy'
    }, {
        'username': 'Michael'
    }, {
        'username': 'Rebecca'
    }, {
        'username': 'Macy'
    }, {
        'username': 'Ross'
    }];
    $scope.createuser = function createuser() {
        if ($scope.name && $scope.name.username && $scope.name.username.length) {
            $scope.users.push(angular.copy($scope.name));
        }
        $scope.name = {};
    };
}]);

HTML：

<form class="simple-form" ng-submit="createuser()">Log in As:
    <input type="text" ng-model="name.username" />
    <input type="submit" />
</form>

小提琴：http://jsfiddle.net/qwertynl/AvUzd/

【讨论】：

ng-submit 如果没有 action 属性，则取消表单的默认提交行为。