AngularJS 初始化 ng-model 从默认值开始

在本文中，我们将介绍使用AngularJS如何初始化ng-model从默认值开始的方法。ng-model是AngularJS中的核心指令之一，可以将数据绑定到HTML元素上。默认情况下，ng-model将从作用域中获取数据进行初始化。但是，有时我们需要在页面加载时设置默认值。我们将通过示例说明如何实现这一点。

阅读更多：AngularJS 教程

使用 ng-init 指令

我们可以使用ng-init指令来设置ng-model的默认值。ng-init指令允许在标记中执行表达式，并初始化作用域中的值。下面是一个简单的示例，展示了如何使用ng-init指令初始化一个ng-model的默认值：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name" ng-init="name = 'John'">
  <p>{{name}}</p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {

  });
</script>

在上面的示例中，我们通过在ng-init指令中设置表达式name = 'John'来初始化名为”John”的默认值。该值被绑定到一个文本输入框，并通过{{name}}表达式显示出来。当页面加载时，输入框将显示默认值”John”。您可以根据需要更改默认值。

使用控制器初始化

另一种初始化ng-model的默认值的方法是在控制器中使用scope属性。通过在控制器中设置scope属性的值，我们可以在页面加载时将其用作ng-model的默认值。下面是一个示例，演示了如何在控制器中初始化ng-model的默认值：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name">
  <p>{{name}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function(scope) {scope.name = "John";
});
</script>

在上面的示例中，我们在控制器中设置$scope.name的值为”John”。这将被用作ng-model的默认值，并在页面加载时显示在输入框中。您可以根据需要在控制器中设置任意数量的默认值。

使用ngValue指令

AngularJS还提供了一个ngValue指令，可以用于为ng-model设置默认值。ngValue指令将表达式的结果作为输入元素的初始值。以下是一个示例，展示了如何使用ngValue指令初始化ng-model的默认值：

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedValue">
    <option ng-value="'option1'">Option 1</option>
    <option ng-value="'option2'">Option 2</option>
    <option ng-value="'option3'">Option 3</option>
  </select>
  <p>{{selectedValue}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function(scope) {scope.selectedValue = 'option2';
});
</script>

在上面的示例中，我们使用ngValue指令为下拉框设置了默认值，并将其绑定到ng-model中。当页面加载时，ng-model的默认值将为”option2″，并在p标签中显示出来。

总结

本文介绍了三种使用AngularJS初始化ng-model默认值的方法。我们可以使用ng-init指令在标记中设置默认值，可以在控制器中使用$scope属性初始化默认值，还可以使用ngValue指令为输入元素设置默认值。根据需求的不同，选择其中一种方法即可。希望本文对您在AngularJS开发中初始化ng-model的默认值有所帮助。