Search Posts

Category: ng-options

Highlight selected value in drop down in angularjs

I would like to display the selected value in the drop down in angularjs. <!DOCTYPE html> <html> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js”> </script> <body> <div><select class=”form-control” size=”30″ style=” height:100px;width:100px” ng-model=”value” ng-options=”c.name for c in customers track by c.id”> <option value=”” selected hidden /> </select></div> </body> </html> By doing the above way it doesn’t highlight the selected value.If I change the ng-options as ng-options=”c.id as c.name for c in customers track by c.id”. In the value I see id […]

Show json array list in drop down angular

I am new in AngularJS and trying to show data in drop down list and facing few errors. Here is my JSON data: $scope.list=[ { “$id”: “1”, “Groups”: [ “xyz”, “abc”, “ugh”, “ccd” ] } ] I am trying to show list of names of Groups mentioned in the json. In controller :- $scope.selectedval = $scope.list[0].Groups; console.log($scope.selectedval); In View I am doing this :- ng-options=”item.Groups for item in list” By doing this I am getting […]

Angularjs version issues: Default select of a disabled option

Why is that in angularjs 1.4.x, doing a default select of a disabled option does not work, but works well in angularjs 1.5.x? For example, the following code works well with angularjs 1.5.5 (selects white by default which is disabled): <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Example – example-select-production</title> <script src=”https//plnkr.co//code.angularjs.org/1.5.5/angular.min.js”></script> </head> <body ng-app=”selectExample”> <script> angular.module(‘selectExample’, []) .controller(‘ExampleController’, [‘$scope’, function($scope) { $scope.myColor = {name:’white’, shade:’light’}; // red $scope.colors = [ {name:’black’, shade:’dark’}, {name:’white’, shade:’light’, notAnOption: true}, […]

ngOptions non-strict comparison with ngModel

Is there any way to perform a non-strict comparison in the <select> ngOptions in order to set the initial value from a model? For example, if the model is an integer and the options key property is a string value, the <select> initial value unfortunately is not set. HTML: <div ng-app=”app”> <div ng-controller=”Controller”> <select data-ng-model=”model” data-ng-options=”option.id as option.text for option in options”></select> </div> </div> JS: var app = angular.module(‘app’, []); app.controller(‘Controller’, function ($scope) { $scope.model […]

ng-options not binding when it has preselected values

I am using select2 to create a div with tags like functionality when creating a new post. Stack is Angular 1.6.x It works well when I am creating a new post BUT when I add pre-selected values when editing the said post, the preselected values never change from the default. In a nutshell, the values are not binding. See below: HTML snippet: <div class=”form-group”> <label for=”tags” class=”control-label”>Tags</label> <select name=”tags” class=”tagsSearch” class=”form-control” id=”tags” ng-options=”tag as tag […]

AngularJS: make the select work on click of dropdown, ngMessages issue

So I have a select box which populates some values into the dropdown using ng-options So I want to show the error messages as soon as the user click on the dropdown and focus out without making a selection. JS Code $scope.someMap = [{ name:”Abc”, id:”a”}, { name:”XYZ”, id:”b”}, { name:”FGH”, id:”c”}, { name:”TY”, id:”d”} ]; HTML <select name=”inpName” ng-model=”person.name” ng-options=”i as i.name for i in someMap track by i.id” required> <option value=”” selected hidden/> […]

Why the below piece of code is not working for me in angularjs

The below code is to populate a drop down select option with json data provided. BUt it is not populating. this is not populating a dropdrop with json data in the fucntion <select ng-model=”selectedName” ng-options=”x for x in values.names”> </select> <select ng-model=”places” ng-options=”x for x in values.places”></select> </div> <script> var app = angular.module(‘myApp’, []); app.controller(‘myCtrl’, function($scope) { $scope.values ={ names :[“Emil”, “Tobias”, “Linus”] places :[“hyd”,”tnd”,”sec”] } }); </script> <p>This example shows how to fill a […]

AngularJS Select Default Option from Select when user input changes

This question is specific to AngularJS 1.6.5 and above and does not apply to any previous versions. I have a form with some ng-options selects and some text inputs. When a user selects the None / Custom option, a text input appears to the right. Once the user starts typing in that input, the None / Custom option is deselected and a new unknown option is added. This is the result of a bug fix […]

Reseting ng-option to default value from the Controller in AngularJS

I have the following select in my app: <select ng-model=”diagnose” ng-options=”c as c.Name for c in diseases | orderBy:[‘Name’]”> <option value=””>Diagnose*</option> </select> Once I send the data to the server, I reset the whole form, but the select goes to empty option instead of showing the empty value/hardcoded option. I’ve tried with the following options: $promisedb.then(function (data) { $scope.diagnose = [1]; }); And: $promisedb.then(function (data) { $scope.diagnose = [0]; }); And: $promisedb.then(function (data) { $scope.diagnose […]

AngularJS select option text

I have a form for updating my pages. A Page has its parent page and I want to have a combobox where I can choose another parent page for my current Page. When the page is loaded I don’t see the title of the current page’s parent in the combobox. When I open the combobox I can see all the titles of all the pages. Page.java public class Page { @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column(name […]

Next Page »