I have an extremely simple md-radio-group and I am having a tough time setting the default value. The group is using an object (which I am assuming is related to the problem).
Please reference my codepen example.
I am defaulting the md-radio-group to the 2nd option but the radio button is never selected.
Am I missing something?
Couple of changes here:
You are interpolating the value of the radio. Doing so is unncessary, and loses reference to the object in the array for which you are iterate. Change your value to ng-value="option".
In your controller, set your default option. Since array positions start at 0, for your second option, you'll use [1].
$scope.optionExample = $scope.options[1];
A simple way if you add another attribute to make default selection, like below
$scope.statusList = [{ id: "APN", status: "Approved", isChecked: true }, { id: "VIP", status: "Scheduled", isChecked: false }, ];
in HTML
<input type="checkbox" ng-model="item.isChecked" ng-repeat="item in statusList"/>
<label class="form-control" style="width:305px"> {{item.status}} </label>
Related
I have a JSFiddle below to explain my problem but basically I have an array called tiles which has a title. When the instance is created() I add a field to this array called active
I then output this array in an <li> element and loop through it outputting the title and active objects. My problem is as you can see in the fiddle when I run v-on:click="tile.active = true" nothing happens to the active state written in the <li> element
but if I run v-on:click="tile.title = 'test'" it seems to update the active object and the title object.
Its strange behaviour I can't seem to work out why. Does anyone have any ideas?
https://jsfiddle.net/jgb34dqo/
Thanks
It's to do with Vue not knowing about your properties, change your array to this:
tiles: [
{
title: 'tile one',
active: false
},
{
title: 'tile two',
active: false
},
{
title: 'tile three',
active: false
}
]
This allows Vue to know about the active property and in turn it knows to monitor that variable.
It's worth looking at this link about Vue Reactivity as it helps with understanding how and when data will change automagically.
If you must add the properties after
take a look at $set. It allows you to add props to an object that then get watched by vue. See this fiddle, notice the change:
this.tiles.forEach(function(tile) {
// Tell vue to add and monitor an `active` prop against the tile object
this.$set(tile, 'active', false);
}.bind(this))
I am using react-bootstrap-multiselect for my project. I need to pass a default value to it before loading. Does react-bootstrap-multiselect have an API to pass a default selected value(s)?
<Multiselect
onChange={this.handleMultiSelect}
value={this.props.multiSelectData}
data={this.props.multiSelectData}
buttonWidth="10
multiple
/>
I want to pass a dynamic value, which will depend on a user click.
Thanks
For everyone who comes across this question again:
<Form.Control as="select" multiple defaultValue={['FOO', 'BAR']}>
<option>FOO</option>
<option>NOT SELECTED</option>
<option>BAR</option>
</Form.Control>
You can simply set an array as defaultValue.
In the example above FOO and BAR are selected.
To do this, set the selected attribute to true for the "data" parameter (in your case, this is an array for the required element this.props.multiSelectData). An example can be found at this link.
An example of an array for the "data" parameter with a default value:
var mass = [
{
value: -777,
label: 'No data',
selected: true
},
{
value: 888,
label: 'data 888'
}
]
I am trying to create a form using angularJs, I have some attributes which is of integer type.
for example, I have variable called admin_events, it has 3 values, 0, 1, 2 to indicate the user's right/permisson to access different files. The number 0 means no right, 1 means view only, 2 means full right.
Now I want to create a form for editing this attributes for the administrator.
How should I go about doing this?
I am thinking of using a angularJs to make 3 radio buttons/checkboxes of 1,2,and 3, so that the administrator can just click on the option and it will update the attributes.
Anyone has any suggestion on what is the best way to do this?
This is one possible approach. See inline comments for explaination.
app.controller('MainCtrl', function($scope, $filter) {
// set up your model
$scope.allPermissions = [
{ "id" : 3, "name" : "ADMIN", selected: false },
{ "id" : 2, "name" : "READ", selected: false },
{ "id" : 1, "name" : "WRITE", selected: false } ];
// Use $watch to detect changes in the model.
// But you might as well want to call this from an event or whatever...
$scope.$watch('allPermissions', function(newval, oldval){
if (oldval != newval)
{
// only return the checked values using $filter
var selectedPermission = $filter('filter')($scope.allPermissions, {selected: true});
// 'selectedPermission' will return a list of all selected permissions.
// Use 'selectedPermission[0].id' to return the first value.
$scope.admin_events = selectedPermission[0].id;
}
},true);
});
And in your HTML
<body ng-controller="MainCtrl">
<p ng-repeat="permission in allPermissions">
<input type="checkbox" ng-model="permission.selected"/>
{{permission.name}}
</p>
admin_events: {{admin_events}}
</body>
In the end, I decided to use a range type input to achieve the selection. It is much easier to implement.
<input ng-model= "user.activities.events" name="activities.events" type="range" max="2" min="0" class="form-control">
But i think #sjokkogutten's answer is not bad too. But the checkboxes are not mutally exclusive. Thanks anyway #sjokkogutten.
I've got an angularjs application that has a form/controller that look essentially like this (boiled down to the pertinent stuff):
angular.module('testApp', [])
.controller('testCtrl', function ($scope) {
$scope.envelopes = [{
id: 1,
name: 'first',
default_spend: '1'
}, {
id: 2,
name: 'second',
default_spend: '0'
}, {
id: 3,
name: 'third',
default_spend: '0'
}, ];
});
And a form that looks roughly like this:
<div ng-app="testApp">
<div ng-controller="testCtrl">
<div ng-repeat="envelope in envelopes">
<div>{{envelope.name}}
<input type="radio" name="default_spend" ng-model="envelope.default_spend" ng-value="1" />
Default Spend: {{envelope.default_spend}}
</div>
</div>
</div>
</div>
You can see this in action with this fiddle.
As you can see, the first envelope is marked as the default_spend envelope and the other two aren't. When I select a different envelope, that envelope also gets marked as the default_spend, but when the radio button is unselected, the model value stays the same ("1"). I understand that I'm dealing with a child scope here due to ng-repeat, but is there a way for me to set an "unselected" value without having to jump through hoops with ngChange?
Not really. When you use ng-value it is what is going to get bound to the ng-model and in your case all of them are having value 1. Also i really did not get the purpose of toggling 1 and 0, however you could just achieve it this way:-
<input type="radio" name="default_spend"
ng-click="selected.envelope = envelope" /> <!--Register an ng-click and set selected one
Default Spend: {{getDefSpend(envelope)}}</div> <!-- Show the text based on selection-->
And in your controller:-
$scope.selected = {envelope: $scope.envelopes[0]};
$scope.getDefSpend = function(envelope){
return $scope.selected.envelope === envelope ? 1 : 0;
}
//$scope.selected.envelope will be your selected option at any point.
Demo
It's because what you have is actually 3 different model values. To work as you want it, you would have ONE model value for all 3. You can either restructure your data, or use ng-change to modify your model manually.
I have an object as below. I have to display this as a drop-down:
var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]
In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:
$scope.object.setDefault = 600;
When I create a drop-down form item as below:
<select ng-model="object.setDefault" ng-options="r.name for r in list">
I face two problems:
the list is generated as
<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>
instead of
<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>
No option gets selected by default even though i have ng-model="object.setDefault"
Problem 1:
The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model.
Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?
Problem 2:
Make sure you're using the following ng-options:
<select ng-model="object.item" ng-options="item.id as item.name for item in list" />
And put this in your controller to select a default value:
object.item = 4
When you use ng-options to populate a select list, it uses the entire object as the selected value, not just the single value you see in the select list. So in your case, you'd need to set
$scope.object.setDefault = {
id:600,
name:"def"
};
or
$scope.object.setDefault = $scope.selectItems[1];
I also recommend just outputting the value of $scope.object.setDefault in your template to see what I'm talking about getting selected.
<pre>{{object.setDefault}}</pre>
In View
<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>
JS:
In side controller
$scope.boxModel = 600;
You can do it with following code(track by),
<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>
This is an old question and you might have got the answer already.
My plnkr explains on my approach to accomplish selecting a default dropdown value. Basically, I have a service which would return the dropdown values [hard coded to test]. I was not able to select the value by default and almost spend a day and finally figured out that I should have set $scope.proofGroupId = "47"; instead of $scope.proofGroupId = 47; in the script.js file. It was my bad and I did not notice that I was setting an integer 47 instead of the string "47". I retained the plnkr as it is just in case if some one would like to see. Hopefully, this would help some one.
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
This would get you desired result Dude :) Cheers
Some of the scenarios, object.item would not be loaded or will be undefined.
Use ng-init
<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"
$scope.item = {
"id": "3",
"name": "ALL",
};
$scope.CategoryLst = [
{ id: '1', name: 'MD' },
{ id: '2', name: 'CRNA' },
{ id: '3', name: 'ALL' }];
<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>
we should use name value pair binding values into dropdown.see the
code for more details
function myCtrl($scope) {
$scope.statusTaskList = [
{ name: 'Open', value: '1' },
{ name: 'In Progress', value: '2' },
{ name: 'Complete', value: '3' },
{ name: 'Deleted', value: '4' },
];
$scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open
}
<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>
I could help you out with the html:
<option value="">abc</option>
instead of
<option value="4">abc</option>
to set abc as the default value.