javascript - AngularJS 选择框在文档就绪时设置默认选择值

标签 javascript html angularjs

在为文档就绪事件设置下拉列表的模型值时,我遇到了一个奇怪的问题。我希望在页面加载时选择 Option4,但是当我执行以下操作时,这似乎没有反射(reflect)在我的 View 中。请看下面的代码...

HTML

<select ng-model="search_for" class="form-control" id="search_for">
                    <option value="">-Search For-</option>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                    <option value="3">Option3</option>
                    <option value="4">Option4</option>
</select> 

JS

angular.element(document).ready(function () {
$scope.search_for = 1;
}

即使我在 html 中执行 {{search_for}} 也证明模型值不是通过不显示任何内容来设置的,而是在下拉值更改时显示值。

我做错了什么?

谢谢。

最佳答案

不是在 document.ready 上添加它,而是在 controller 的开头添加它,因为 controller 在查看之前加载,模型值得到反射(reflect)

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="search_for" class="form-control" id="search_for">
                    <option value="">-Search For-</option>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                    <option value="3">Option3</option>
                    <option value="4">Option4</option>
</select> 

</div>

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

</body>
</html>

请运行上面的片段

Here is a working Demo

关于javascript - AngularJS 选择框在文档就绪时设置默认选择值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40903749/

相关文章:

javascript - 如何使用 $stateProvider 更改选项卡的内容?

javascript - Angular Js - 操作 DOM 并添加点击行为

javascript - Handlebars (如果情况不工作)

Visual Studio 2008 中的 Javascript 代码段

php - Pubnub PHP 订阅函数

html - CSS - 创建带有特殊下划线的标题

javascript - 参数化动态查询/SQL 清理 NodeJS

javascript - 更改表格行高

javascript - Jquery Mobile Web 应用程序的性能增强

javascript - 表单未使用 Angular 清除 $.ajax 成功函数中的值