angularjs Archives

angularjs Archives - Ebhor.com Read The Latest Post Java, Css, Html, Php learning articles Sun, 13 Aug 2023 08:10:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 https://www.ebhor.com/wp-content/uploads/2021/05/ebhor_logo_100x.jpg angularjs Archives - Ebhor.com 32 32 Angularjs select : ng-repeat ng option default multiple select selected value https://www.ebhor.com/select-angularjs-with-static-and-dynamic-option-values/ Sun, 13 Aug 2023 04:01:00 +0000 http://ebhor.com/?p=6012 Angularjs provides the way to bind HTML select elements with angularjs model The select directive also provides dynamic option value using ng-repeat and ng-options When the item from select element is get selected from option then it is bind with the value of ng-model associated with select element using angularjs two-way binding. Setting option value ... Read more

The post Angularjs select : ng-repeat ng option default multiple select selected value appeared first on Ebhor.com.

]]> Angularjs provides the way to bind HTML select elements with angularjs model

The select directive also provides dynamic option value using ng-repeat and ng-options

When the item from select element is get selected from option then it is bind with the value of ng-model associated with select element using angularjs two-way binding.

Setting option value using the value attribute of the option element will set this value as a string.

On selection of this value in ng-model the model variable must be a string type.

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js

select is

<select ng-model="string" [name="string" ]="" [multiple="string" [required="string" [ng-required="string" [ng-change="string" [ng-options="string" [ng-attr-size="string">
...
</select>

description of parameters fields is self-explanatory.

To access the value in the model you have to provide modal name rest of the attributes are optional as per requirement anyone can use.

let us see one basic example for selecting a value in the model

ng options default : Select default option in angularjs

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="selectController">
 <form name="myForm">
    <label for="favouriteColor"> Select You Favourite Color: </label><br>
    <select name="favouriteColor" ng-model="favouriteColor">
      <option value="red">Red</option>
      <option value="green">Green</option>
            <option value="blue">Blue</option>
      <option value="orange">Orange</option>
    </select><br>
    you have selected: {{favouriteColor}}
    </form>
</div>

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

Try It

Angularjs get selected option value dynamically

populating select with dynamic values

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="selectController1">
 <form name="myForm">
    <label for="favouriteColor"> Select You Favourite Color: </label><br>
    <select name="favouriteColor" ng-model="favouriteColor">
     <option ng-repeat="color in colors" ng-value="color">{{color}}</option>
    </select><br>
    you have selected: {{favouriteColor}}
    </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('selectController1', function($scope) {
$scope.colors=["Red","Greed","Blue","Orange"];
});
</script>

Try It

selecting a id based on value from json array as below

Populate dropdown with json data using angularjs

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="selectController2">
 <form name="myForm">
    <label for="favouriteColor"> Select You Favourite Color: </label><br>
    <select name="favouriteColor" ng-model="favouriteColor">
     <option ng-repeat="color in colors" ng-value="color.id">{{color.name}}</option>
    </select><br>
    you have selected: {{favouriteColor}}
    </form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('selectController2', function($scope) {
$scope.colors=[{id:1, name:"Red"},
               {id:2,name:"Greed"},
               {id:3,name:"Blue"},
               {id:4, name:"Orange"}
               ];
});
</script>
</body>
</html>

Try It

Angularjs multiple select example

To select multiple in the above program use multiple with the select element as below

<select name="favouriteColor" ng-model="favouriteColor" multiple="">
     <option ng-repeat="color in colors" ng-value="color.id">{{color.name}}</option>
    </select><br>

Try It

by holding the control key with a click can select multiple values

Using ng-option with select to generate dynamic option value

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="selectController2">
 <form name="myForm">
    <label for="favouriteColor"> Select You Favourite Color: </label><br>
    <select name="favouriteColor" ng-model="favouriteColor" ng-options="color.id as color.name for color in colors" >{{color.name}}</option>
    </select><br>
    you have selected: {{favouriteColor}}
    </form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('selectController2', function($scope) {
$scope.colors=[{id:1, name:"Red"},
               {id:2,name:"Greed"},
               {id:3,name:"Blue"},
               {id:4, name:"Orange"}
               ];
});
</script>
</body>
</html>

pre-populating any specific value in ng-options is easy in the following example you can see this.

Consider we have to populate Blue as default value then set $scope.favouriteColor=3 in controller

see below

$scope.favouriteColor=3;

How to create First Angular App (Step by step )

Angular14 Routing with example

Angular Spring Boot showing data in table

The post Angularjs select : ng-repeat ng option default multiple select selected value appeared first on Ebhor.com.

]]>