I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
Here is what I tried :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x"
src="http://code.angularjs.org/1.0.7/angular.min.js"
data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selectedOption">
<option value="">-----Select an option-----</option>
<option ng-repeat="option in options" value="{{option.value}}">
{{option.name}}
</option>
</select>
<button ng-click="addOption()">Add option</button>
</body>
</html>
When you add an option, the select switch to a non existant value. It seems like the select value update is resolved before the options update.
Does anyone have any idea on how i could fix that ?
You state: I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
You can do this by changing your HTML like so (EDITed after comment):
<option ng-repeat="option in options" value="{{option.value}}" ng-selected="option.value==options.length-1"> {{option.name}}</option>
More information on the ng-selected directive
Line 19 in your accompanying js should also be deleted - this line currently reads like so:
$scope.selectedOption = $scope.options.length - 1;
Related
i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 2}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
Not displaying first option in select Element?
Here drop down list starting with empty option.Why i am not getting first option as o index of array?
Why does angularjs include an empty option in select
how to use ng-option to set default value of select element
Customized select element options in AngularJS
how to display option as selected in select box in angularjs?
Obtaining the selected option in a select element with AngularJS
First selection of element not working in IE
selected element in ng-options with array
How to select first select option after filtering in Angular
Display unlisted value in select with ng-options
displaying a selected value with ng-options angularjs
How to set a selected option of a dropdown list control using angular JS
How to select first element in select list Angular JS?
how to make the first option active in ng-select coming inside ng-repeat
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selected" ng-init="a" >
<option ng-repeat="a in ['CSE','ECE','CHEM','MME','CE']">{{a}}</option>
</select>
<p>{{selected}}</p>
</body>
</html>
You need to assign selected in order for it to select the option of your choice. In your code, selected is null/undefined and therefore your first option won't be selected.
Here is how I usually solve this problem:
js
app.controller('MainCtrl', function($scope) {
$scope.arr = ['CSE','ECE','CHEM','MME','CE'];
});
html
<body ng-controller="MainCtrl">
<select ng-model="selected" ng-init="selected = arr[0]" >
<option ng-repeat="a in arr">{{a}}</option>
</select>
<p>{{selected}}</p>
</body>
In ng-init I assign selected to be the first element of the array, this will make this option be selected by default.
I am new to Fuel UX and trying to make checkbox work. I have the following simple page:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load 22234</span>
</label>
</div>
<script>
//javascript initialization goes here
</script>
</body>
</html>
I need to initialize the checkbox via Javascript. The following works:
$('#myCustomCheckbox1').checkbox();
The following are not working:
$('input[type="checkbox"]').each(function(index, item) {
$(this).checkbox();
});
or
$('input[type="checkbox"]').checkbox()
Could any expert confirm that checkboxes must have id if they are initialized via Javascript? Or I did it in a wrong way?
Please review the documentation. The checkbox jQuery plugin can only be bound to the label, not the wrapping div (if present), nor the input.
You might try:
$('.checkbox > label').each(function(index, item) {
$(this).checkbox();
});
Please find the plunker code
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.levels = [{LevelId:0,LevelName: "Level 1"}, {LevelId:1,LevelName: "Level 2" }];
$scope.updateLevel = function() {
console.log("Fired on change");
$scope.result="Data Changed";
}
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label for="textbox3">Select Level</label>
<select id="LevelSelect" class="form-control" ng-Change="updateLevel()" ng-model="selectedLevel" ng-options="lvl as level.LevelName for level in levels"></select>
<p>{{result}}</p>
</body>
</html>
I referred to the various SO questions like on not calling the declared method and onchange not working. Advice.
The way you use ng-options is incorrect there for the rendered options values is getting undefined:undefined for all the options check below image, and when you change the selected item its not trigger ng-change event because all the values are same.
so change it to,
ng-options="level as level.LevelName for level in levels"
please refer this angular DOC
UPDATED PLUNKER
I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ?
I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.
It worked for me.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<span id="{{name}}" class="count">Jeinsh</span>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
here is working plunk => link
Inspect the element in developer tool on span and you will get updated id there.
As #karaxuna said, the following should work
id="sourceId::{{post.id}}"
Or doing the string concatenation inside the {{}} with a +
id="{{'sourceId::' + post.id}}"