All geek questions in one place

AngularJS Select Box Set Default value for the selected document

I had a strange problem when setting the value of the drop-down list model in the document ready event. I want Option4 to be selected when the page loads, however this does not seem to be reflected in my view when I do the following. Please see below code ...

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;
}

Even when I do {{search_for}} in html, it proves that the model value is not set, showing nothing, but shows the value when the value of the drop-down list changes.

What am I doing wrong?

Thank.

+4
source share
2 answers

document.ready add controller, ,

<!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>
Hide result

+4

ng-app ng-controller , document.ready

var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
 $scope.search_for = "1";
  
});
<head>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-app="DemoApp"    ng-controller="akuaController">
  
  
  <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>
  

 </body>

</html>
Hide result
+1

Source: https://habr.com/ru/post/1662490/

More articles:


All Articles