Question

是否可以让ng-models获得默认值，例如''？

我有一个表单，我使用了jQuery的serialize函数，每当一个值不存在时，它仍然会将它包含在序列化数据中，例如。 {name: '', age: ''}。

但是，当我使用尝试使用Angular的$http发布并从$scope获取模型时，当它为空时显示为undefined。

Answer 1

您也可以尝试：

<div ng-init="foo={}">
    <input type="text" ng-model="foo.name=''"/>
</div>

或：

<input type="text" ng-init="foo.name=''"/>

它会出现：

foo = { name: '', .... }

Answer 2

您可以在视图中使用它们之前在模型中定义属性。

如果您显示控制器代码，我会告诉您需要更新哪些内容以将其添加到范围内。

它应该类似于：

在定义应用程序的js文件中

angular.module("MyModule", []).controller('MyCtrl', ['$scope', function ($scope) {
    $scope.myModel = {name:""};
}]);

在您的HTML中

<input type="text" ng-model="myModel.name"/>

注意我不喜欢没有全局变量/函数，因此我使用Angular提供的不同语法来避免这种情况并允许缩小。

Answer 3

您不需要使用jQuery序列化。

您的表单应该绑定到这样的范围：

<form ng-controller="MyCtrl" ng-submit="submit()">
    <input type="text" name="name" ng-model="formData.name">
    <input type="text" name="age" ng-model="formData.age">
    <input type="submit" value="Submit Form">
</form>

function MyCtrl($scope) {
    $scope.formData = {};

    $scope.submit = function() {   
        $http.post('/someUrl', $scope.formData)
    };
}

因此，在$ http中，您只需传递$ scope.formData。

Is there a more effective way to serialize a form with angularjs?

Answer 4

有时，您不知道该值是否已设置。这就是默认值。

当我需要确保变量具有某些值时，我会使用它。您可以在控制器中设置它

$scope.possiblyEmptyVariable = $scope.possiblyEmptyVariable || "default value";

在没有Angular的情况下效果很好

// some object that may or may not have a property 'x' set
var data = {};

// Set default value of "default"
// carefull, values like 'null', false, 0 will still fall to defaults
data.x = data.x || "default";

// Set default value of "default"
// this will not fall to defaults on values like 'null', false, 0
data.x = !"x" in data || "default";

如果需要设置一组值，请使用angular.extend或jQuery.extend

data.z = "value already set";
var defaults = { x: "default", y: 1, z: "default" };
var newData = angular.extend({}, defaults, data);
// { x: "default, y: 1, z: "value already set" }

希望有所帮助

AngularJS ng-model的默认值

4 个答案: