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.
Related
This is a simple html code and it is working fine. Now I have an AngularJS array and I can access and bind variables like $scope.ID or $scope.text which is working fine. But how can I bind values, to $scope.articles array. with relevant values.
For example
If i change the value of f0, (just example it is not working) $scope.articles.[0].betrag_gnetto value should change
If i change the value of f1, (just example it is not working) $scope.articles.[1].betrag_netto value should change
HTML Code (I have created these field through ng-repear loop)
<input type="text" ng-model="betrag_netto0" id="f0">
<input type="text" ng-model="betrag_netto1" id="f1">
<span ng-bind="betrag_netto0"></span>
<span ng-bind="betrag_netto1"></span>
AngularJS Array looks like
{
"isInternalInvoice":1,
"name":"Rechnung",
"ID":"5cd45e86",
"text":null,
"countArticles":2,
"articles":[
{
"ID":"130.123",
"betrag_netto":"123987"
},
{
"ID":"131.123",
"betrag_netto":"1"
}
]
}
Create input fields corresponding to the objects present in the articles array using ng-repeat and this will make it two way binding.
var app = angular.module('plunker', []);
app.controller('ApplicationController', function($scope) {
$scope.obj = {
"isInternalInvoice": 1,
"name": "Rechnung",
"ID": "5cd45e86",
"text": null,
"countArticles": 2,
"articles": [{
"ID": "130.123",
"betrag_netto": "123987"
}, {
"ID": "131.123",
"betrag_netto": "1"
}]
};
});
<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>
<body>
<div class="container" ng-controller="ApplicationController">
<div class="row" ng-repeat="article in obj.articles">
<input type="text" ng-model="article.betrag_netto" id="f{{$index}}"> <span ng-bind="article.betrag_netto"></span> </div>
</div>
</body>
</html>
try $scope.articles[0].betrag_gnetto
It works
As shown below, in the controller.js, I have tried to use the { name: 'item' } style and it worked in the viewer.
However, I would like to pull the data from the SQL Database.
I tried using {{member.member_name}} but it didn't work.
$http.get('../crud/members_select.php').then(function(response){
$scope.members = response.data;
});
this.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
Thus, my question is "How can I do the {{member_name}} thing in order to repeat the data in a single code from SQL Database?"
Below is the HTML CODE.
<div class="ibox-content">
<select ng-options="name as member.member_name for n in members"
multiple
ng-model="selections"
bs-duallistbox></select>
</div>
Thank you in advance!!
You need to do it this way
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
$scope.selections = [];
}]);
</script>
<div ng-controller="ExampleController">
<label>Color (null not allowed):
<select ng-model="selections" ng-options="item.member_name for item in items" multiple></select>
</label>
<hr/>
Currently selected: {{ selections }}
</div>
</body>
</html>
I am trying to build the select item component using angular js. But it is not selecting the correct default selected value.
I am initializing the select item value as {"brandSetCode":1,"bannerColor":null,"fontColor":null};
But it always selects the last element. How to solve this issue?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
</head>
<body ng-app="sanitizeExample">
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope, $sce) {
$scope.initSelectItem ={"brandSetCode":null,"bannerColor":null,"fontColor":null};
$scope.mySelectableItems =[{
"label": "All",
"value": {
"brandSetCode": null,
"bannerColor": null,
"fontColor": null
}
}, {
"label": "SPIRITS",
"value": {
"brandSetCode": 1,
"bannerColor": null,
"fontColor": null
}
},
{
"label": "WINES",
"value": {
"brandSetCode": 3,
"bannerColor": null,
"fontColor": null
}
}
];
}]);
</script>
<div ng-controller="ExampleController">
<select name="brand"
data-ng-model="initSelectItem"
data-ng-options="brand.value as brand.label for brand in mySelectableItems track by $index">
</select>
</div>
</body>
</html>
Use ng-init() and initialize the default option.
<select ng-init="initSelectItemDefault()" ng-model="initSelectItem" ng-options="brand.label for brand in mySelectableItems">
</select>
And in controller
$scope.initSelectItemDefault = function(){
$scope.initSelectItem = $scope.mySelectableItems.filter(e => e.label == "All")[0];
}
DEMO
You need to remove the track by or manually compare them because track by adds a field named $$hash in the model.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
</head>
<body ng-app="sanitizeExample">
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope, $sce) {
$scope.initSelectItem = {};
$scope.mySelectableItems =[{
"label": "All",
"value": {
"brandSetCode": -1,
"bannerColor": -1,
"fontColor": -1
}
}, {
"label": "SPIRITS",
"value": {
"brandSetCode": 1,
"bannerColor": null,
"fontColor": null
}
}
];
}]);
</script>
<div ng-controller="ExampleController">
<select name="brand" ng-init="initSelectItem = mySelectableItems[0].value"
data-ng-model="initSelectItem"
data-ng-options="brand.value as brand.label for brand in mySelectableItems">
</select>
</div>
</body>
</html>
I am using ng-option to update my model data. But I am not able to see my selection when selecting last option from dropdown list for the first time. However in the code my model is holding that selected item.
My html:
<select class="form-control" name="myField" ng-model="myField" ng-options="key as key for (key , value) in fieldFieldOptions" ng-required="myAllFiles=='NO'"/></select>
controller-
$scope.fieldFieldOptions = [];
$scope.fieldFieldOptions = result.data;[contains drop down list]
$scope.myFIeld contains my selected item from dropdown list.
What i am doing wrong in this specific case?
Here is a working snippet with ngOptions:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.myField;
result = {};
result.data = {
"key1": {
firstName: "6",
lastName: "8",
Id: "19",
select: "10"
},
"key2": {
firstName: "1",
lastName: "11",
Id: "39",
select: "11"
},
"key3": {
firstName: "2",
lastName: "22",
Id: "29",
select: "12"
}
};
$scope.fieldFieldOptions = result.data;
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<select class="form-control" name="myField" ng-model="myField"
ng-options="key as key for (key, item) in fieldFieldOptions"
ng-required="myAllFiles=='NO'">
</select>
</div>
<pre>fieldFieldOptions = {{fieldFieldOptions | json}}</pre>
<pre>myField = {{myField | json}}</pre>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.myField;
result = {};
result.data = {
firstName: "6",
lastName: "8",
Id: "19",
select: "10"
};
$scope.fieldFieldOptions = result.data;
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<select class="form-control" name="myField" ng-model="myField"
ng-options="key as key for (key, item) in fieldFieldOptions"
ng-required="myAllFiles=='NO'">
</select>
<pre>myField = {{myField | json }}</pre>
</div>
</body>
</html>
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