Ng-Model Default Value：你需要知道的一切

在AngularJS中，ng-model是一个非常常用的指令，用于绑定输入控件（如input、select、textarea等）的值到应用的$scope对象上。然而，很多开发者在使用ng-model时常常会遇到一个问题：如何设置默认值？本文将详细介绍ng-model default value的设置方法及其相关应用。

什么是ng-model？

ng-model指令是AngularJS中双向数据绑定的核心。它不仅可以将用户输入的值绑定到模型上，还可以将模型的值反映到视图中。简单来说，当用户在表单中输入数据时，ng-model会自动更新$scope中的数据，反之亦然。

设置ng-model的默认值

在实际开发中，常常需要为表单控件设置一个初始值或默认值。以下是几种常见的方法：

直接在HTML中设置默认值：
```
<input type="text" ng-model="user.name" value="John Doe">
```
这种方法虽然简单，但不推荐，因为它会导致视图和模型不同步。
在控制器中设置默认值：
```
$scope.user = {
    name: 'John Doe'
};
```
这是最推荐的方法，因为它确保了模型和视图的一致性。
使用ng-init指令：
```
<input type="text" ng-model="user.name" ng-init="user.name='John Doe'">
```
虽然ng-init可以设置默认值，但它主要用于初始化局部变量，不建议在复杂应用中使用。

应用场景

表单预填充：在用户注册或登录表单中，预填充用户名或其他信息，提高用户体验。
数据展示：在编辑页面中，预先填充已有的数据，方便用户修改。
条件渲染：根据某些条件设置默认值，例如根据用户角色显示不同的默认选项。

注意事项

避免使用ng-init：虽然ng-init可以设置默认值，但它会使代码难以维护，建议在控制器中初始化数据。
保持数据一致性：确保模型和视图的数据始终保持同步，避免使用value属性直接设置默认值。
动态默认值：有时默认值可能需要根据某些条件动态生成，这时可以在控制器中使用逻辑来设置。

示例代码

下面是一个简单的示例，展示如何在控制器中设置默认值：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <form>
        <input type="text" ng-model="user.name" placeholder="Enter your name">
        <p>Your name is: {{user.name}}</p>
    </form>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.user = {
                name: 'John Doe' // 设置默认值
            };
        });
    </script>
</body>
</html>

总结

ng-model default value的设置是AngularJS开发中一个常见但容易被忽视的问题。通过在控制器中正确设置默认值，可以确保数据的一致性和应用的健壮性。希望本文能帮助你更好地理解和应用ng-model，从而提高开发效率和用户体验。记住，保持代码的可读性和可维护性是编写高质量AngularJS应用的关键。