Default Value of select box not being set

Default Value of select box not being set - javascript

I have a data structure like so:
$scope.personalityFields.traveller_type = [
{"id":1,"value":"Rude", "color":"red"},
{"id":2,"value":"Cordial", "color":"yellow"},
{"id":3,"value":"Very Friendly", "color":"green"},
];
And a select box that looks like so:
<select map-value name="traveller_type" ng-init="init_select()" class="full-width" ng-model="traveller_type" ng-options="item as item.value for item in personalityFields.traveller_type">
<option value="" disabled selected> Choose ...</option>
</select>
How do I set the value of the select box to a value based on a response that maps to the "value" field in the attached JSON? Please help !
So if in the response, the traveller_type is field is set to "Rude", I would want the value of "Rude" to be set in the select box.
This what the response looks like:
someObject = {
traveller_type: "Rude"
}
this needs to be displayed on the select box

If you have only value("Rude","Cordial","Friendly") back from response, you have to change ngOptions syntax to be ng-options="item.vaue as item.value for item in personalityFields.traveller_type"(bind item.value to options)
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.traveller_type = 'Rude';
$scope.personalityFields = {
"traveller_type": [{
"id": 1,
"value": "Rude",
"color": "red"
},
{
"id": 2,
"value": "Cordial",
"color": "yellow"
},
{
"id": 3,
"value": "Very Friendly",
"color": "green"
},
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
item.vaue as item.value for item in personalityFields.traveller_type">
<option value="" disabled selected> Choose ...</option>
</select>
{{traveller_type}}
</div>
Else you have entire object({"id":1,"value":"Rude", "color":"red"}) back from response, you have to change ngOptions syntax to be ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"(use track by to only compare value property)
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.traveller_type = {
"id": 1,
"value": "Rude",
"color": "red"
};
$scope.personalityFields = {
"traveller_type": [{
"id": 1,
"value": "Rude",
"color": "red"
},
{
"id": 2,
"value": "Cordial",
"color": "yellow"
},
{
"id": 3,
"value": "Very Friendly",
"color": "green"
},
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
item as item.value for item in personalityFields.traveller_type track by item.value">
<option value="" disabled selected> Choose ...</option>
</select>
{{traveller_type}}
</div>

There are a couple of things wrong with your code, below is an example of you can do to achieve your goal:
angular.module('limitToExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.serverResponse = {
"id": 1,
"value": "Rude",
"color": "red"
};
$scope.personalityFields = {
traveller_type: [{
"id": 1,
"value": "Rude",
"color": "red"
}, {
"id": 2,
"value": "Cordial",
"color": "yellow"
}, {
"id": 3,
"value": "Very Friendly",
"color": "green"
}],
}
}]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example103-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
</head>
<body ng-app="limitToExample">
<div ng-controller="ExampleController">
<select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">
</select>
</div>
</body>
</html>
This is one way of setting the default value, you can make it dynamic based on the response of your server (guess that is what you want?)
I am only replicating what #Pengyy describes in his answer, so feel free to accept his over mine.

Related

AngularJS ng-options setting default select value

app.factory("ParentsFactory", function ($http) {
return $http.get("/home/parents");
})
ParentsFactory.then(function (data) {
$scope.Parents = data.data;
});
<select class="form-control" ng-model="modelparent">
<option value="{{parent.ParentID}}" ng-selected="{{parent.ParentID==2}}" ng-repeat="parent in Parents">{{parent.DocumentNo}} - {{parent.FullName}}</option>
</select>

Remove interpolation braces {{}} from ng-selected and try:
<select class="form-control" ng-model="modelparent">
<option value="{{parent.ParentID}}" ng-repeat="parent in Parents" ng-selected="parent.ParentID==2">{{parent.DocumentNo}} - {{parent.FullName}}</option>
</select>
Edit:
According to your data i have edited my answer:
var app=angular.module("app",[]);
app.controller('Ctrl',['$scope',Ctrl]);
function Ctrl($scope){
$scope.modelparent = "1";
$scope.Parents = [{ "ParentID": 1, "FullName": "Jack", "BirthDate": "/Date(631137600000)/", "BirthPalace": 1, "DocumentType": 1, "DocumentNo": "P544123", "AddDate": "/Date(1483300800000)/", "UpdateDate": null, "LastLoginDate": null },
{ "ParentID": 2, "FullName": "Ammanda", "BirthDate": "/Date(631137600000)/", "BirthPalace": 1, "DocumentType": 1, "DocumentNo": "P5441234", "AddDate": "/Date(1483300800000)/", "UpdateDate": null, "LastLoginDate": null }]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-controller="Ctrl" ng-app="app">
{{Abc}}
<select class="form-control" ng-model="modelparent">
<option value="{{parent.ParentID}}" ng-repeat="parent in Parents">{{parent.DocumentNo}} {{parent.FullName}}</option>
</select>
</div>

why is ng-model not checking default radio button?

Below is the fiddle i am working:
http://jsfiddle.net/3c0dxf4d/
The ng-model has an object and the ng-value maps to object, why is my default value {"id":1,"name":"Bill"}
not getting selected by default.

Check out this fiddle http://jsfiddle.net/roz98eda/
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.customers = [{
"id": 1,
"name": "Bill"
}, {
"id": 2,
"name": "Bob"
}, {
"id": 3,
"name": "Biff"
}];
$scope.customer = {};
$scope.currentCustomer = {
"id": 1
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<table>
<tr ng-repeat="theCustomer in customers">
<td>
<input type="radio" ng-model="$parent.currentCustomer.id" ng-value="theCustomer.id">{{theCustomer.name}}</td>
</tr>
</table>
<br>
<div>{{currentCustomer}}</div>
</div>
</div>

Because you've put the initial value to
$scope.currentCustomer = {
"id": 1,
"name": "Bill"
};
Just remove or change it.
Please check following code please.
app.controller("ctrl", function ($scope) {
$scope.customers = [{
"id": 1,
"name": "Bill"
}, {
"id": 2,
"name": "Bob"
}, {
"id": 3,
"name": "Biff"
}];
$scope.customer = {};
*$scope.currentCustomer = {
"id": 1,
"name": "Bill"
};*
})

Change
<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">
To
<input type="radio" ng-model="$parent.currentCustomer.id" name="foo" ng-value="theCustomer.id" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
From ng-value docs
It is mainly used on input[radio] and option elements, so that when
the element is selected, the ngModel of that element (or its select
parent element) is set to the bound value.

Ng-Options in Angular for Arrays and Objects

First of all 2 working solutions:
Example 1 - Array in Controller
$scope.s1 = [
{
"name": "Item1",
"id": 1
},
{
"name": "Item2",
"id": 2
}
];
View 1
<select ng-model="select1" ng-options="foo.id as foo.name for foo in s1">
<option value="">Select a Value</option>
</select>
Example 2 - Object in Controller
The same concept may help you also here, if you know the name of "myS2":
$scope.s2 = {
"myS2": [
{
"name" : "Item1",
"id" : 1
},
{
"name": "Item2",
"id": 2
}
]
};
View 2
<select ng-model="select2" ng-options="foo.id as foo.name for foo in s2.myS2">
<option value="">Select a Value</option>
</select>
Now the question:
$scope.s2 has further objects {myS1:[..] to mySn:[..]} with different names and I want'to use them as option group name? How can I do that in ng-options?

I don't think that you can nest loops in ng-repeat, but, adding just a bit of business logic on your controller you can gain what you want!
hope it helps :)
(function(window, angular) {
function TestCtrl(vm, data) {
var options = [];
for(var group in data) {
if(!data.hasOwnProperty(group)) { continue; }
for(var i = 0, len = data[group].length; i < len; i++) {
var item = data[group][i];
item.group = group;
options.push(item);
}
}
vm.options = options;
vm.current = options[0];
}
angular
.module('test', [])
.value('S2', {
"myS2": [
{
"name" : "Item1 mys2",
"id" : 1
},
{
"name": "Item2 mys2",
"id": 2
}
],
"myS3": [
{
"name" : "Item1 mys3",
"id" : 1
},
{
"name": "Item2 mys3",
"id": 2
}
]
})
.controller('TestCtrl', ['$scope', 'S2', TestCtrl])
;
})(window, window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<article ng-controller="TestCtrl">
<select ng-model="current" ng-options="item as item.name group by item.group for item in options">
</select>
</article>
</section>

Hiding list item in angular ionic repeater

I am building a list control where the user can filter the data. The list control has 4 levels with multiple items. By default the first level item appear only. Once the user clicks the first level, the second is shown and the first is hidden. The user can then click on the second level, in which case the third level will appear and hiding the second one etc..
When I select the first level, then all other first levels need to be hidden as well. Right now when I select the first level then the second appears for all first level items. Once the first level has been selected all other first levels need to be hidden, because the user is going to filter within the first level he selected. In the plunkr below, you will see two departments, if I select "Men", the "Womens" section should be hidden.
The hierarchy is:
Department -> Product Type -> Style -> Color Size Combination
The JSON is already structured in this way:
[
{
"departmentName":"Womens",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001",
"details":[
{
"color":"blue",
"size":"m",
"productNum":1234567891212
},
{
"color":"blue",
"size":"x",
"productNum":1234567891212
},
{
"color":"blue",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"blue",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
},
{
"departmentName":"Men",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001Men",
"details":[
{
"color":"green",
"size":"m",
"productNum":1234567891212
},
{
"color":"green",
"size":"x",
"productNum":1234567891212
},
{
"color":"green",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"green",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
}
]
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='todo'>
<ion-pane>
<ion-content>
<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
<div class="row">
<div class="col col-100">
<span ng-repeat="f in filter">
{{f}} <i class="icon ion-ios-close-empty"></i>
<i class="icon ion-ios-arrow-thin-right" ng-show="$index < (filter.length-1)"></i>
</span>
</div>
</div>
<div class="list" ng-repeat="item in filterData">
<div class="item item-divider" ng-click="setFilter(item.departmentName, 1);" ng-show="showDepartments">
{{item.departmentName}}
</div>
<div ng-repeat="pt in item.productTypes">
<div class="item item-divider" ng-click="setFilter(pt.name, 2);" ng-show="showProductTypes">
{{pt.name}}
</div>
<div ng-repeat="style in pt.styles">
<div class="item item-divider" ng-click="setFilter(style.name, 3);" ng-show="showStyles">
{{style.name}}
</div>
<div ng-repeat="styleLine in style.details">
<div class="item item-divider" ng-click="setFilter(styleLine, 4);" ng-show="showStyleDetails">
{{styleLine.color}} - {{styleLine.size}}
<br/> {{styleLine.productNum}}
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
And the JS:
angular.module('todo', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.filter = [];
$scope.showDepartments = true;
$scope.showProductTypes = false;
$scope.showStyles = false;
$scope.showStyleDetails = false;
$scope.setFilter = function(filterValue, level) {
if (level != 4) {
$scope.filter[$scope.filter.length] = filterValue;
} else {
$scope.filter[$scope.filter.length] = filterValue.color;
$scope.filter[$scope.filter.length] = filterValue.size;
}
if (level == 1) {
$scope.showDepartments = false;
$scope.showProductTypes = true;
}
if (level == 2) {
$scope.showProductTypes = false;
$scope.showStyles = true;
}
if (level == 3) {
$scope.showStyles = false;
$scope.showStyleDetails = true;
}
if (level == 4) {
$scope.showStyleDetails = false;
}
}
$scope.title = 'Ionic';
$scope.filterData = [{
"departmentName": "Womens",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001",
"details": [{
"color": "blue",
"size": "m",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "x",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}, {
"departmentName": "Men",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001Men",
"details": [{
"color": "green",
"size": "m",
"productNum": 1234567891212
}, {
"color": "green",
"size": "x",
"productNum": 1234567891212
}, {
"color": "green",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "green",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}];
})
And finally the plunkr:
http://plnkr.co/6YdnId

I got it working. I have used a property on the item itself to hide the first level for all items except the selected item. I have updated the plunkr. Hope this helps somebody.

You should use a filter factory and aplly to your ng-repeat https://docs.angularjs.org/guide/filter

update html table when dropdown value change

From json i need to update the table based on month and year from javascript.
Any approach is fine for me
For reference i have created the FIDDLEbut it is not complete yet, just want to show the real environment
link: :http://jsfiddle.net/qytdu1zs/1/
HTML
<div class="dropdown">
<select name="one" class="dropdown-select">
<option value="">Select Year</option>
<option value="0">2014</option>
<option value="1">2013</option>
<option value="2">2012</option>
</select>
</div>
<div class="dropdown ">
<select name="two" class="dropdown-select">
<option value="">Select Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
html Table
<div id="example1"></div>
Jquery - i have used mustache.js
$.ajax({
url : 'data/front_finance.json',
dataType : 'json',
success : function (json) {
var customer = $('#example1').columns({
data : json,
schema : [{
"header" : "ID",
"key" : "id",
"template" : "{{id}}"
}, {
"header" : "Name",
"key" : "name",
"template" : '{{name}}'
}, {
"header" : "Actual",
"key" : "actual"
}, {
"header" : "Target",
"key" : "target"
}, {
"header" : "Status",
"key" : "status",
"template" : "<img src ='{{status}}' alt='{{status}}'></img>"
}, {
"header" : "Trend",
"key" : "trend",
"template" : "<img src ='{{trend}}' alt='{{trend}}'></img>"
}
]
});
}
});
JSON
[
{
"year": "2013",
"jan": [
{
"id": 1,
"name": "data",
"actual": "17",
"target": "19",
"status": "red",
"trend": "down"
}
],
"Feb": [
{
"id": 2,
"name": "data1",
"actual": "10",
"target": "19",
"status": "red",
"trend": "down"
}
],
"March": [
{
"id": 3,
"name": "data2",
"actual": "34",
"target": "19",
"status": "green",
"trend": "down"
}
]
},
{
"year": "2014",
"jan": [
{
"id": 1,
"name": "data",
"actual": "17",
"target": "19",
"status": "red",
"trend": "down"
}
],
"Feb": [
{
"id": 2,
"name": "data1",
"actual": "10",
"target": "19",
"status": "red",
"trend": "down"
}
],
"March": [
{
"id": 3,
"name": "data2",
"actual": "34",
"target": "19",
"status": "green",
"trend": "down"
}
]
}
]

NEW FIDDLE FIDDLE
$(document).ready(function (){
cloneObj= $("#example1").clone();
$('select[name=one]').on('change', function() {
var selectedYear=($("option:selected", this).text());
if (selectedYear!="Select Year"){
for (var a in data){
if(data[a].year==selectedYear){
objMonth=data[a];
return false;
}
}
}else{
objMonth=null;
}
});
$('select[name=two]').on('change', function() {
var selectedYear=($("option:selected", $('select[name=one]')).text());
if (selectedYear!="Select Year"){
var selectedMonth=($("option:selected", this).text());
var jsonValue=objMonth[MonthMap[selectedMonth]];
$("#example1").replaceWith(cloneObj.clone());
$('#example1').columns({ data : jsonValue});
}else{
alert("Please Select year please");
}
});
});

I'll give you an approach on how to go about this. Now, I don't know the exact html of your table how the td and tr are structured, so I'm not going to be able to give you exact code that you can replicate.
You let the user select the month and year from the dropdown whose value you can get in jquery. What would help here greatly is if you have the option values set according to the way months are stored in the JSON array.
//JSON array is structured somewhat like:
"jan": [
{
"id": 1,
"name": "data",
"actual": "17",
"target": "19",
"status": "red",
"trend": "down"
}
]
//Your HTML could be
<select name="two" class="dropdown-select">
<option value="">Select Month</option>
<option value="jan">January</option>
<option value="Feb">February</option>
<option value="March">March</option>
Although this is not a necessity, this would greatly help in accessing the corresponding values in the JSON array. Otherwise you would require a mapping of the option values or text to the month names in form of an array or a suitable data structure.
var selectedMonth;
var selectedYear;
//Store the information selected from the dropdown menu for month and year respectively
//Assuming the JSON array is named arr
$.each( arr, function( index, value ) {
if (arr[index]['year'] == selectedYear){
var foo = arr[index]['year'][selectedMonth][0]; //Based on your array defintion
//You can access the required info of this object by simply doing:
//foo.id,foo.name,foo.status etc. and update the relevant table elements' html here
}
});
I hope this gets you started in the right direction.

We have a table ABC. In that table we have a column which contains dropdown as select having value as blank, option a, option b. Now, with change with this dropdown I want to update the input field accordingly, i.e; if a is chosen, input field value will be 100, if b is chosen, input field will be 0 and if blank is chosen, input field will be blank , readonly. The input field id is set to input_ where i is 1 to no of rows in the table.
Below is the code for implementing this.
HTML :
<select id="select" onChange="changeEvent(this.options[this.selectedIndex].value);" name="select">
Javascript:
function changeEvent(chosen) {
var table = document.getElementById("ABC");
var rows = document.querySelectorAll('tr');
var rowsArray = Array.from(rows);
table.addEventListener('change', (event) => {
var target = event.target.toString();
var rowIndex = rowsArray.findIndex(row => row.contains(event.target));
var x = table.rows.length;
var id = "input_"+(parseInt(rowIndex) - 2).toString();
if(chosen === "a") {
table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='100' id='"+id+" 'style='width:50px;'></input></td>";
return;
}else if(chosen === "b"){
table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='0' id='"+id+"' readonly style='width:50px;'></input></td>";
return;
}else{
table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='' id='"+id+"' readonly style='width:50px;'></input></td>";
return;
}
})
}

Develop Reference

JavaScript is the programming language of the Web.

Default Value of select box not being set - javascript

Related

AngularJS ng-options setting default select value

why is ng-model not checking default radio button?

Ng-Options in Angular for Arrays and Objects

Hiding list item in angular ionic repeater

update html table when dropdown value change

Categories

Resources