Please find the plunker for radio buttons. I am expecting when I select radio button, the selected object from $scope.itemList to be assigned to selectedItemDetails but it is not happening. And also by default when the page loads I want the default radio button to be selected based on var tagNumTobeSelectedByDefault = 2; i.e., "Gety of House" to be selected by default, how can I do it?
I am getting the index of the object to be selected from the list as follows:
var indexObjectTobeSet = $scope.itemList.map(function(x) {
return x.tagNum;
}).indexOf(tagNumTobeSelectedByDefault);
But failing to set that particular radio button.
You don't set the index, you set selectedItemDetails' value to the actual object you want selected in the $scope.itemList array. Thus,
$scope.selectedItemDetails = $scope.itemList.filter(function(item) { return item.tagNum === tagNumTobeSelectedByDefault; })[0];
should work (just remember to put it after the $scope.itemList definition). You might even want to consider moving the itemList object into a service or constant.
When you are declaring selectedItemDetails as an empty literal {}, you do not have a specific binding. Declare a property the ng-model can attach to :
$scope.selectedItemDetails = { selected : null }
and
<input type="radio" ng-model="selectedItemDetails.selected" name="eachCat" data-ng-value="eachCat">
Then it works. Now you can also set the default selected radio item with
$scope.selectedItemDetails = { selected : $scope.itemList[3] }
http://plnkr.co/edit/9hVxlhzvCmx3PIsbImVD?p=preview
Related
I have a checkbox that I'd like to set the indeterminate state to based on the states of other checkboxes. When I'm on the page that the checkboxes are all in, it updates as expected (i.e. the checkbox is found). But when I navigate to that from another page, my method does not find the checkbox (i.e. returns null).
When I debug in Chrome devtools, I notice
let checkBoxWithIndeterminateState;
let checkbox = false;
fireWhenCheckBoxChanged() {
// returns null when navigating from another page but not when on its own page
checkBoxWithIndeterminateState = document.getElementById('checkBoxWithIndeterminateState')
checkBoxWithIndeterminateState.indeterminate = true
}
Template:
<input type="checkbox" id="checkBoxWithIndeterminateState" data-ng-model="checkbox">
How do I wait until the new template has loaded before my method tries to find the checkbox? I've read some suggestions to use this._$scope.$on('$viewContentLoaded'... but this doesn't work.
Thanks!
What about adding an ng-init directive to your target checkbox and do your logic in it, this way you are sure the element is there, here is a suggestion:
<input type="checkbox" ng-init="initTragetCheckbox()">
In your controller
$scope.initTragetCheckbox = function () {
// your code to execute for other checkboxes
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
....
}
I am new to ag-grid. I am trying to add custom column menu item.
I wrote this in constructor:
this.gridOptions = <GridOptions>{
getMainMenuItems: this.addColumnMenu
};
So, Whenever I click filter icon of column, 'addColumnMenu' is called.
Now, in addColumnMenu, I have added my menu item as
var menuItems = params.defaultItems.slice(0);
menuItems.push({
name: 'Stats', action: this.callStat }
});
Its giving this.callStat is not defined. Because I am not getting anything in this
Whats wrong here ?
If addColumnMenu needs to access 'this', then it needs to be bound. One way to achieve this:
this.gridOptions = <GridOptions>{
getMainMenuItems: this.addColumnMenu.bind(this)
};
I am trying to use a pair of Kendo dropdown lists to filter a dataset in AngularJS. One uses a static ObservableArray datasource to filter the dataset by status; the other datasource is a set of distinct values from the "regionID" column of the dataset, also stored as an ObservableArray. When the status dropdown changes, the region dropdown is supposed to reload the list of regions from the newly-filtered data. This works, but the selected value ends up blanked out, even though the model that's supposed to represent the selected value still has the correct value, and the data is still correctly filtered by that same value. Opening the dropdown and then clicking off of it causes it to then display that value as it should.
Here is what the HTML looks like:
<select name="filterByRegion" style="width: 180px;" class="form-control" ng-model="selectedRegion" ng-change="onRegionFilterChange(selectedRegion)" kendo-drop-down-list k-options="regionFilterOptions"></select>
<select name="accountStatus" style="width: 180px;" class="form-control" ng-model="status" ng-change="onAccountStatusChange(status)" kendo-drop-down-list k-options="accountStatusOptions"></select>
Here are the two "onChange" methods from the controller:
$scope.onAccountStatusChange = function(status) {
$scope.status = status;
updateRegionFilterList();
};
$scope.onRegionFilterChange = function(selectedRegion) {
$scope.selectedRegion = selectedRegion;
};
And lastly, here is the updateRegionFilterList method:
var updateRegionFilterList = function () {
$scope.regions.empty();
angular.forEach($scope.accounts, function(account) {
if (account.reviewStatus === $scope.status) {
if ($scope.regions.indexOf(account.regionID) <= -1) {
$scope.regions.push(account.regionID);
}
}
});
$scope.regions.sort();
$scope.regions.unshift("Filter By Region:");
if ($scope.regions.indexOf(tempRegion) <= -1) {
$scope.selectedRegion = "Filter By Region";
}
};
I have tried many ways of working around this, including trying to preserve and reload the selectedRegion value, splicing out unneeded regions instead of emptying the ObservableArray, etc., and I have checked everything in the debugger and all of the values are correct (no obvious race conditions either).
Any ideas?
I figured it out. I had mixed kendo and angular configurations with the dropdowns and was relying on an angular process to update the data, which wasn't updating the Kendo MVVM stuff properly. Switching it to pure Kendo did the trick.
Working with angular, select2 widget.
I am declaring it in HTML something like this:
<div>
<select id = "dropdown"
...
<option value = "1" id="1">1</option>
<option value = "2" id="2" >2</option>
<option value = "3" id="3"" >3</option>
/select>
</div
and want to programatically change the selected item (called from another function).
When invoking the code:
$("#dropdown").select2().select2('val', "3")
I can see that the value at the dropdown changes, but when actually accessing the model attribute of the drop down (to fetch the selected item), it is not set to what I tried to set it to.
When checking the onChange event of the dropdown, I can see the e.val is undefined.
See the next fiddle as an example (after click the link, I wasn't suppose to get "undefined" in the alert box): http://jsfiddle.net/kcArV/1/
Any ideas what I am doing wrong ?
It should be
$('#attribute').select2().on('change', function(e) {
alert($(this).val());
});
e is the event object, not the select control, the method context this points to the select element, so you can call the .val() to get the selected value
Demo: Fiddle
How can I force a user to make a selection from a qooxdoo SelectBox? I would like the SelectBox to initially appear with an empty selection (or better yet, a "Please select..." message). I would like form validation to fail if the user has not made a selection, and the selectBox to appear with the red "invalid" decoration and "required" tooltip, just like a required textField.
Similarly for RadioButtonGroup: is there a way to make the group initially appear with no button selected, and not become valid until a selection is made?
Later... this seems to work for the SelectBox case:
var genderSlct = new qx.ui.form.SelectBox();
genderSlct.add(new qx.ui.form.ListItem("")); // initially selected null item
genderSlct.add(new qx.ui.form.ListItem("Male", null, "M"));
genderSlct.add(new qx.ui.form.ListItem("Female", null, "F"));
...
myForm.getValidationManager().setValidator(function(items) {
var valid = true;
if (genderSlct.getSelection()[0].getModel() == null) {
genderSlct.setValid(valid = false);
genderSlct.setInvalidMessage("Please select your gender.");
}
...
if (valid) {
genderSlct.setValid(true);
...
return true;
} else {
return false;
}
});
Later still... Found a solution for the RadioButtonGroup as well:
To get that initial unselected state, add an invisible first listItem with null model:
myRbg.add(new qx.ui.form.RadioButton("").set({
model: null, visibility: "excluded"
}));
Then add the same style of code as for the selectionBox to the form validator.
Check out this demo which offers exactly which your looking for in the SelectBox case:
http://demo.qooxdoo.org/2.0.1/demobrowser/index.html#data~Form.html
You can simply check for the selection in the validator.