I am trying to fetch 2 different ids from ng-options object list and map the same into select model on user select. The model is mapped properly but the value is not shown on select box.
http://plnkr.co/edit/Z3ohLie4vpTvXhUiLfl6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Select something</h1>
<select ng-model="selectedItem" ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items"></select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>
</body>
</html>
The Javascript:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo', anotherId: 11 },
{ id: 2, name: 'bar', anotherId: 22 },
{ id: 3, name: 'blah', anotherId: 33 }];
});
You are using a very old version of Angular. If you can use a fairly recent version, the answer is using the track by clause of ng-options:
<select ng-model="selectedItem"
ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items track by item.id"></select>
Forked plunk: http://plnkr.co/edit/0SwHfYVuYd5iIA9P4mpU?p=preview
Related
I have a ng-repeat iterates through an array and loads my select options, and one of the options is an empty string, but if i click in on the values the empty option disapears, im not sure why
this is my select
<select
class="form-control input-sm"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-readonly="itemForm.produtosempesobrutodefinido"
ng-required="!itemForm.produtosempesobrutodefinido">
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}" ng-selected="itemForm.grossweightmeasurementunitcode == unidadepeso.commoncode">{{unidadepeso.sigla}}</option>
</select>
i did a $scope.unidadespeso.push = ' '; to achieve the empty value, any ideas?
Add empty item to array.
Following example might help you.
Please comment if you have any doubts.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("myapp", []).controller('MainCtrl', ['$scope', function($scope) {
$scope.selectedItem = { name: 'two', id: 27 };
$scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];
var emptyItem = {name: '', id: '' };
$scope.items.unshift(emptyItem);
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</body>
</html>
I create a controller that shows data in li using ng-repeat.
The data has a variable called filter and used for categorizing the data. Now I want to filter the li based on this variable and want to do it by using buttons.
But I don't know how to connect the filter to the data in the controller.
I create plunkr for it: plunkr
there is an in-built filter named 'filter' and it works perfectly for this
updated filter to be an object currentFilter, and defaulted currentFilter.filter to "app" which tells filter which property on the objects to filter on.
added the buttons and a tied them to a function on the scope that sets currentFilter.filter when they are clicked
updated ng-repeat to use the 'currentFilter' and set strict to true so it matches the word exactly. By default strict is false and works like a predicate.
angular docs: https://docs.angularjs.org/api/ng/filter/filter#example
var app = angular.module('plunker', []);
app
.controller('isotopeCtrl', isotopeFunction);
function isotopeFunction($scope) {
$scope.names = ['website-1', 'website-2', 'app-1', 'psd-1', 'psd-2', 'psd-3'];
$scope.currentFilter = {
filter: 'app'
};
$scope.data = [{
name: 'website-1',
filter: 'website'
},
{
name: 'website-2',
filter: 'website'
},
{
name: 'app-1',
filter: 'app'
}
];
$scope.setFilter = function(filter) {
$scope.currentFilter.filter = filter;
};
console.log($scope.names);
}
<!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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="isotopeCtrl">
<h2>Simple Data</h2>
<ul>
<li ng-repeat="item in data">
<div>{{ item.name }}</div>
</li>
</ul>
<h2>Using Filter</h2>
<p>Here I used a dynamic filter - {{ currentFilter.filter }} )</p>
<ul>
<li ng-repeat="item in data | filter:currentFilter:true">
<div>{{ item.name }}</div>
</li>
</ul>
Filters
<button ng-click="setFilter('app')">app</button>
<button ng-click="setFilter('website')">website</button>
</body>
</html>
In this codepen I'm attemptling to load a option element from a scoped variable :
<html>
<head>
<title>AngularJS test</title>
</head>
<body ng-app ng-controller="TestCtrl">
<select ng-init="vendor = vendors[0]" ng-model="vendor" ng-options="vendorName as vendor.name for vendorName in vendors"></select>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>
function TestCtrl($scope) {
$scope.vendors = [{
name: 'Oracle1',
name: 'Oracle2'
}];
}
But just the element at position[1] is being loaded.
CodePen : http://codepen.io/anon/pen/OVbXJV?editors=101
Why is just 1 option element being loaded ?
You should have an array of objects not just one object containing multiple names.
$scope.vendors = [
{name: 'Oracle1'},
{name: 'Oracle2'}
];
You can then use ng-options like so:
ng-options="vendor.name for vendor in vendors"
I'm populating a dropdown list from an object. I want to set the related model value as binded object's "text". But also I have to send a parameter (binded object's value) for a function. I can do this. But Model's value is getting all the object. I want only get the object's Text.
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.list = [{
"Text": "75.000",
"Value": 1
}, {
"Text": "100.000",
"Value": 2
}, {
"Text": "150.000",
"Value": 3
}, {
"Text": "250.000",
"Value": 4
}];
$scope.GetVal = function(val) {
alert(val);
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Text for item in list" ng-change="GetVal(model.Value)">
</select>
<pre>
my model: {{model}}
</pre>
</body>
</html>
My Codes as seen below. Can you help please?
As per my understanding I have updated the cod please check and let me know if this is what u need.
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<script src="script.js"></script>
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Text for item in list" ng-change="GetVal(model)">
<option value= "" disabled="">select value</option>
</select>
<pre>
my model: {{model.Text}}
</pre>
</body>
</html>
// Code goes here
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.list = [{
"Text": "75.000",
"Value": 1
}, {
"Text": "100.000",
"Value": 2
}, {
"Text": "150.000",
"Value": 3
}, {
"Text": "250.000",
"Value": 4
}];
$scope.GetVal = function(val) {
alert(val.Value);
};
});
Basar,
You will need to change the ng-repeat as below
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<script src="script.js"></script>
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Value for item in list" ng-change="GetVal(model)">
<option value= "" disabled="">select value</option>
</select>
<pre>
my model: {{model.Value}}
</pre>
</body>
</html>
sen,
Do you wish to bind only Text to your model? or Text and Value both?
If you only wish to bind Text, please check updated plnk.
I know, this is an old question.
I have a select list created with ng-repeat and not ng-options. The issue I have is that there is an extra blank list item that disappears as soon as the user change the value.
The answer to AngularJS - extra blank option added using ng-repeat in select tag mentions that the selected item should be initialized to avoid that issue. I did it but I still have a blank entry.
HTML:
<select ng-model="selectedLanguage">
<option ng-repeat="language in languages" value="{{language}}" ng-selected="selectedLanguage == language">{{language.name}}</option>
</select>
<h2>{{selectedLanguage}}</h2>
Controller:
app.controller('Ctrl', function($scope) {
$scope.languages = [{ name: "English", key: 'en' }, { name: "French", key: 'fr'}];
$scope.selectedLanguage = $scope.languages[0];
});
The Plunker
You should use ng-options I updated your plunkr
http://plnkr.co/edit/Iz7wFfG9l6wmQ50w2RpP
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.1" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<h1>Hello Plunker!</h1>
<select ng-model="selectedLanguage" ng-options="language.name | uppercase for language in languages">
</select>
<h2>{{selectedLanguage}}</h2>
</body>
</html>
JS (no changes)
// Code goes here
var app = angular.module("app", []);
app.controller('Ctrl', function($scope) {
$scope.languages = [{ name: "English", key: 'en' }, { name: "French", key: 'fr'}];
$scope.selectedLanguage = $scope.languages[0];
});