angularjs - ng-model 的 AngularJS 默认值

Question

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

我有一个使用 jQueryserialize函数的表单，每当 aa 值不存在时，它仍会将其包含在序列化数据中，例如{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。

有没有更有效的方法用 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" }

希望有帮助