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>
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>
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 have a situation where there are 3 check box ("initially checked"). Since it as 3 check box it will use ng-repeat for 3 time and loops the division for there time. Now once i uncheck any of the check box it should display div for 2 time. So far ,
$scope.items = [
{id: 0, title: "apple",selected:true},
{id: 1, title: "orange",selected:true},
{id: 2, title: "grapes",selected:true},
];
On ng-click in each check box i have called a function test("apple").
$scope.test = function(vals) {
$scope.vl=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].title == vals) {
console.log("dnt push");
}
else {
$scope.vl.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vl array");
console.log($scope.vl);
}
Problem I am facing is it works fine for 1st uncheck but not when i do for multiple uncheck. When i check unchecked its not loading div.
In HTML I am using like,
<div ng-repeat="item in vl"> some tags </div>
not quite sure about your question, but hope my answer can give you some hints.
plunker demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.items = [{
id: 0,
title: "apple",
selected: true
}, {
id: 1,
title: "orange",
selected: true
}, {
id: 2,
title: "grapes",
selected: true
}];
});
<!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.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected">{{item.title}}
</div>
{{items | json}}
</body>
</html>
If and only if you want to put in an array the item who are checked :
http://plnkr.co/edit/DvoPBBvKf3AhYM4qcBhx?p=preview
html
<div ng-repeat="item in items">
<input type="checkbox"
ng-model="item.selected" ng-click="test(item.title)"> {{item.title}}
</div>
controller
$scope.test = function(vals) {
$scope.vl=[];
$scope.vlChecked=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].selected) {
$scope.vlChecked.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vlChecked array");
console.log(JSON.stringify($scope.vlChecked));
}
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.