I have the below code which is used to drill down the tree structure from the model to the view in the dropdown. I am unable to understand the below expression:
ng-options="classification for (classification, configs) in filterData"
Couple of doubts here.
Why is the classification dropdown points to configs for ng-model.
How can I get the selected classificaion (system_config or network_config) in my control?
On selecting the classification from the dropdown the configs are automatically getting filtered. How to get the selected config in my controller.
Plnkr link - Plnkr
The code for the view is as below:
<div class="m-b">
<div class="form-group s-b" style="width: 150px;">
<span>classification</span>
<select class="form-control" id="classification" ng-model="configs" ng-options="classification for (classification, configs) in filterData" ng-change="handleClassification(criteria)" style="max-width:100%"> </select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Config</span>
<select id="config" ng-options="config for (config, attributes) in configs" class="form-control" ng-model="attributes" style="max-width:100%" ></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Attribute</span>
<select id="attribute" class="form-control" ng-options="attribute for attribute in attributes" ng-model="attribute" style="max-width:100%;" ng-change="handleAttrChange(attribute)"></select>
</div>
</div>
The model is as below:
{
"system_config": {
"damask": [
"umask"
],
"fsuration": [
"AUTOFSCK_DEF_CHECK"
],
"hible": [
"HIEFORMAT"
],
"linux_status": [
"SeLinuxStatus"
],
"kl_version": [
"KeelVersion"
],
"ssh_parameters": [
"Port",
"Protocol"
],
"network_parameter": [
"kernel.shmmax",
"kernel.sysrq"
],
"snmp_community": [
"rocommunity",
"trapmmunity"
],
"password_expiration_parameters": [
"PASS_MAX_DAYS",
"PASS_WARN_AGE"
]
},
"network_config": {
"interface_configuration": [
"ONBOOT"
],
"networking_configuration": [
"NETWORKING",
"NETWORKING_IPV6",
"NOZEROCONF"
],
"interface_speed": [
"InterfaceSpeed"
]
}
}
Inside my controller on submit button click:
$scope.searchParams = function(){
console.log($scope.configs);
}
Please let me know since I am using the ng-options for the first time and getting confused.
In your controller, the select value will be stored in your ng-model variable. You're using this to filter your list and set the values for the next dropdown, thus not saving the selected option.
"classification for (classification, configs) in filterData" means you're creating options for your select from the object filterData. The (classification,configs) part is a (key,value) of your objects. This means you're options will be the keys of the filterData object and the results you'll be storing in configs (which also is your ng-model) the value of the object keys. You can find more information about it here
To access the select values you could use HTML
$("#classification")[0].options[$("#classification")[0].selectedIndex].innerText;
or you can use the ng-change directive to call a function that sets the selected value. Change your ng-change to ng-change="handleClassification(configs)" instead of "criteria" and then add to your script
$scope.handleClassification = function(cfg){
$scope.myConfig = cfg;
}
Related
Here I have two mongo collections.
Contents from the first collection is listed using ng-repeat. While looping this three ng-repeats are provided since I am fetching key value pair. The first ng-repeat for looping the collection then the two for loopong the key value pairs of an object array inside each document. So in my second collection I want to insert this object array along with a new key value pair to each index. This is my first mongo collection, i have an object array like this
"highlight" : [
{
"status" : "upcoming"
},
{
"status" : "overdue"
},
{
"status" : "today"
}
]
and i have looped this in ng-repeat
my html is like this
<div layout="row" ng-repeat="list in dynamicSettingsCtrl.features.settings">
<fieldset class="standard">
<md-checkbox aria-label="Checkbox 1" ng-model="moreOptions">
<p>{{list.name}}</p>
</md-checkbox>
<div layout-gt-sm="row">
<div ng-if="moreOptions">
<form name="dashboard">
<md-input-container class="md-block" flex-gt-sm>
<label>Set Limt</label>
<input ng-model="dynamicSettingsCtrl.setValues.maxLimit" ng-pattern="/^(\d)+$/" />
<p class="alert" ng-show="dashboard.maxLimit.$error.pattern">Numbers only, please.</p>
</md-input-container>
<div ng-repeat="highlight in list.highlight">
<span ng-repeat="(key, value) in highlight">Set the limit where <b>{{key}}</b> is <b>{{value}}</b></span>
<md-input-container class="md-block" flex-gt-sm>
<label></label>
<input ng-model="dynamicSettingsCtrl.setValues.upLimit[$index]
" ng-pattern="/^(\d)+$/" />
</md-input-container>
</div>
<md-button class="md-raised md-primary" ng-click="dynamicSettingsCtrl.addCount()">Submit</md-button>
</form>
</div>
</div>
</fieldset>
</div>
after entering values the expected new mongo collection should look like this.
Now i want to store limit for each of this status like
"highlight" : [
{
"status" : "upcoming",
"limit":"10"
},
{
"status" : "overdue",
"limit":"1"`
},
{
"status" : "today",
"limit":"3"
}
]
I want to set limit for each status. that is I want to set limit of status=overdue to 1 and so on.
since the ng-model has same name for all the key value pair when i try adding limit every field changes to same. So i tried using index,then it was OK! but i know that using index is not a proper method.
Somebody suggest me how to work with ng-init on this, or any other possible method. How can i get the correct values to my controller. How to insert the values to my second collection?
Thanks in advance
I'm getting blank data while loading JSON data into Dropdown using Angular ng-options.
My JSON Values
"tagFormat": {
"displayText": "Tag Format",
"options": [{
"value": "js",
"name": "JS"
}, {
"value": "vast",
"name": "VAST"
}]
},
HTML View
<div class="select_padding">
<select class="form-control" ng-options="otf.value as otf.name for otf in details.tagFormat.options">
<option>Select Tag Format</option>
</select>
</div>
here details is my scope variable.
how to get these data and also next time I need to use selected value. so Do I need to bind with ng-model ?
Thanks
Here is the working code:
<select class="form-control" ng-options="item as item.name for item in details.tagFormat.options track by item.value" ng-model="selected">
<option value="">Select Tag Format</option>
</select>
In $scope.selected you read the selected item.
Check this example on Codepen: http://codepen.io/beaver71/pen/Vexwmr
I am trying to fetch Roles data(JSON) from a url and using ng-repeat to assign it to radio buttons(shows list of roles) and display it in MODAL. Any one option must be selected for the role currently assigned to the user.
When a user changes the selection and clicks ok, selected value should be assigned to an object, which is further passed to a URL to update the role of user.
If i use,
<div ng-repeat="item in roleDataList">
<input type="radio" ng-model="item" ng-checked="item.RoleId==assignedRoleId?true:null" name="RoleRadioButton" ng-value="item" />
<span>{{item.RoleName}}</span>
</div>
then it shows the already assigned data as default but i cant access the selected data,
If i use,
<div ng-repeat="item in roleDataList">
<input type="radio" ng-model="$parent.parentRoleId" ng-checked="item.RoleId==assignedRoleId?true:null" name="RoleRadioButton" ng-value="item" />
<span>{{item.RoleName}}</span>
</div>
then selected role is available in $parent.parentRoleId, but default value is not selected.
Any help where both can be achieved?
Check out this fiddle pretty much what you want i think
Fiddle
<div ng-controller="Ctrl">
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" ng-model="selection.ids[category.id]" name="group" id="{{category.id}}" />
{{category.name}}
</label>
</span>
<pre ng-bind="selection.ids | json"></pre>
function Ctrl($scope) {
$scope.selection = {
ids: {"50d5ad": true}
};
$scope.categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ];
}
I am a pretty new to Angularjs and am having an issue on my select
I have populated my select fields but when I want to show what has been selected from the json I can only pull out the one value. I need both the name and the type but in 2 different places in my webpage
Fiddle is http://jsfiddle.net/ktcle/9Ymvt/1455/
<div ng-controller="MyCtrl">
<select ng-options="style.name as style.name for style in styles" ng-model="style">
<option style="display:none" value="">select a style</option>
</select>
<h2>selected: {{style}}</h2>
<h3>type: {{styles.type}}</h3>
</div>
and
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.styles = [
{
name: "Red",
code: "123",
type: "t-shirt"
},
{
name: "Yellow",
code: "456",
type: "vest"
},
{
name: "Green",
code: "789",
type: "jumper"
},
];
}
Specify the entire style object as the value in your ng-options expression. And, bind ng-model to something defined outside of ng-options.
<select ng-options="style as style.name for style in styles" ng-model="selected.style">
http://jsfiddle.net/9Ymvt/1456/
Two things:
Rewrite your ng-options as "style.name for style in styles". The way you have it will display style.name and select style.name. You want to select style in stead
For type your styles variable is mistakenly pluralized. Should be: <h3>type: {{style.type}}</h3>
<div ng-controller='MyCtrl'>
<select ng-options="style.name for style in styles" ng-model="style">
<option style="display:none" value="">select a style</option>
</select>
<h2>selected: {{style}}</h2>
<h3>type: {{style.type}}</h3>
</div>
Here's your updated jsFiddle: http://jsfiddle.net/mnibecker/B2wJ4/
I am having a problem binding Angular ng-check to ng-model, that is ng-model does do not recognize the selected state of my check boxes.
Here is a description(Its a much larger code base but I have tailored to minimize code).
On page load in JavaScript I initialize my products and set the default values:
$scope.products = {}
$scope.SetProductsData = function() {
var allProducts;
allProducts = [
{
id: 1,
name: "Book",
selected: true
}, {
id: 2,
name: "Toy",
selected: true
}, {
id: 3,
name: "Phone",
selected: true
}]
I have a master control in my view that list a check box for each 3 products(Book,Toy and phone):These are checked by default
<div style="float:left" ng-init="allProducts.products = {}" >
<div ng-repeat="p in Data.products">
<div style="font-size: smaller">
<label><input id="divPlatorm" ng-model="products[p.name]" ng-init="products[p.name] = true" type="checkbox"/>
{{p.name}}</label>
</div>
</div>
</div>
Then a table that have the same products repeated in rows:
<div ng-repeat="line in lineProducts" ng-init="line.products = {}">
<div id="sc-p-enc" ng-repeat="p in Data.products">
<div id="sc-p-plat" style="font-size: smaller">
<label id="pl-label"><input ng-checked="products[p.name]" ng-model="line.products[p.name]" ng-init="line.products[p.name] = true" type="checkbox"/>
{{p.name}}</label>
</div>
</div>
</div>
When I check/unchecked the master products the corresponding check boxes changes in the rows. So if I have 100 rows with (Book,Toy and phone) the unchecked Toy I can see where all toys are unchecked in the rows.
When I send the data to my controller I can still see all Toys = true even though they were unchecked.
If I physically go to the row then unchecked each toy and send the data to my controller Toys = False.
How can I get the check boxes selected state to change when controlled from the master check-boxes?
I have followed the post found here but I dont think this applies to my scenario:
AngularJS: ng-model not binding to ng-checked for checkboxes
It seems the ng-checked in the table is binding to products[p.name], which the ng-model in your master control in the view also binding to. But the ng-model in your table is binding to another property, line.products[p.name].
I think you probably don't need ng-checked in the table since each item has its own ng-model. So you might change your table view to
<label id="pl-label"><input ng-model="line.products[p.name]" type="checkbox"/>{{p.name}}</label>
and in the controller, change the corresponding value of line.products[p.name] every time the value of products[p.name] is changed.
I just solved this problem myself by using "ng-init" and "ng-checked" ---
ng-checked - 'checked' the checkbox as form was loaded
ng-init- bound my checkbox html value attribute to the model
There is a comment above stating that its not good to use ng-init in this manner, but not other solution was provided.
Here is an example using ng-select instead of ng-checked:
<select ng-model="formData.country">
<option value="US" ng-init="formData.country='US'" ng-selected="true">United States</option>
</select>
This binds "US" to model formData.country and selects the value on page load.
If I understand the functionality you are trying to cover the following fiddle might help you. Here is the code:
<div style="float:left" ng-app ng-init="products = [
{
id: 1,
name: 'Book',
line: 'Books',
selected: true
}, {
id: 2,
name: 'Another Book',
line: 'Books',
selected: true
}, {
id: 3,
name: 'Toy',
line: 'Toys',
selected: false
}, {
id: 4,
name: 'Another Toy',
line: 'Toys',
selected: false
}, {
id: 5,
name: 'Phone',
selected: true
}];lineProducts = ['Toys', 'Books']" >
<div style="float:left">
<div ng-repeat="p in products">
<div style="font-size: smaller">
<label>
<input ng-model="p.selected" type="checkbox"/>
{{p.name}}
</label>
</div>
</div>
</div>
<div ng-repeat="line in lineProducts">
{{line}}
<div ng-repeat="p in products | filter:line">
<div style="font-size: smaller">
<label>
<input ng-model="p.selected" type="checkbox"/>
{{p.name}}
</label>
</div>
</div>
</div>
</div>
Also why do you have ids in your html? With angular there is no need in ids, and considering that they are inside ng-repeats they will be ambiguous and therefore useless anyway.
I also agree with Nikos about usage of the ng-init. I used it in my jsfiddle because I am lazy, I would not use it in the production code
You should use ng-model there that would provide you two way binding. Checking and unchecking the value would update the value of product.selected
<input type="checkbox" ng-model="p.selected"/>