I have 2 radio groups with 2 radio buttons each, age group (AG1, AG2) and language ("one language", "multilingual"). Depending on which radio button is checked, I want to fill a select box with different options. So there's 4 different combinations = 4 different sets of options (4 AngularJS scope properties). I got it to work with one radio group using ng-model, but I can't figure out how to do this with two. I tried using jQuery but it won't work, I've been told that I shouldn't mix AngularJS and jQuery.
HTML (ng-value is obviously wrong here, I don't know what to set as value)
<div class="form-check">
<input class="form-check-input" type="radio" name="AG" id="AG1" ng-model="values" ng-value="PD1E">
<label class="form-check-label" for="AG1">4 - 5 years</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="AG" id="AG2" ng-model="values" ng-value="PD2M">
<label class="form-check-label" for="AG2">6 - 7 years</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="language" id="one" ng-model="values" ng-value="PD1E">
<label class="form-check-label" for="one">one language</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="language" id="multi" ng-model="values" ng-value="PD1M">
<label class="form-check-label" for="multi">multilingual</label>
</div>
<br>
<select id="inputPD" class="form-control">
<option ng-repeat="x in values">{{x}}</option>
</select>
AngularJS scope properties
$scope.PD1E = [
"1-one", "0,3", "0,5", "0,8", "1,8", "5,9", "12,8", "32,2", "58,8", "81,6", "100,0"
];
$scope.PD2E = [
"2-one", "0,7", "0,9", "2,0", "7,9", "21,3", "41,5", "100,0"
];
$scope.PD1M = [
"1-multi", "2,1", "3,5", "5,6", "12,5", "19,4", "33,3", "48,6", "61,8", "82,6", "95,8", "100,0"
];
$scope.PD2M = [
"2-multi", "0,5", "2,2", "7,6", "23,8", "49,2", "70,3", "100,0"
];
So if I select AG1 + one, it should display PD1E in the select box.
AG2 + one = display PD2E
AG1 + multi = display PD1M
AG2 + multi = display PD2M
One approach is to use the ng-if directive with the options:
<select id="inputPD" ng-model="selectPD" class="form-control">
<option ng-repeat="x in PD1E" ng-if="radio1=='1' && radio2=='E'">{{x}}</option>
<option ng-repeat="x in PD2E" ng-if="radio1=='1' && radio2=='E'">{{x}}</option>
<option ng-repeat="x in PD1M" ng-if="radio1=='2' && radio2=='M'">{{x}}</option>
<option ng-repeat="x in PD2M" ng-if="radio1=='2' && radio2=='M'">{{x}}</option>
</select>
The <option> elements will only be added when the condition is true.
Related
I am working on an AngularJS application. I am trying to create a page that allows the user to select one of three radio buttons. Two of the three also have checkboxes underneath them to allow the user to select additional options if they've selected the appropriate radio button. To try to prevent improper checkbox selections, I'm trying to set the ng-disabled attribute on the checkboxes. So far, it's not working, and I've tried several different iterations.
This is my HTML:
<div class="panel-body">
<input type="radio" id="notFraudulent" name="actionSelector" ng-model="cleared" /><label for="notFraudulentRadio"> Not Fraudulent</label><br />
<input type="checkbox" id="highVolumeCustomer" ng-model="highVolumeCustomer" ng-disabled="(fraudulent||cleared)" /><label for="highVolumeCustomer"> High Volume Customer</label><br />
<br/>
<input type="radio" id="appearsFraudulent" name="actionSelector" ng-model="fraudulent" /><label for="isFraudulentRadio"> Appears Fraudulent</label><br />
<input type="checkbox" id="reportAccount" ng-model="reportAccount" ng-disabled="(cleared||reviewed)" /><label for="reportAccount"> Report Account</label><br />
<br/>
<input type="radio" id="markReviewed" name="actionSelector" ng-model="reviewed" /><label for="markReviewed"> Mark As Reviewed For Later</label>
</div>
I have tried changing the operator on the ng-disabled expressions to &&, as I've seen some articles where it's suggested that the operators don't mean what one thinks they mean. But that doesn't work, and neither does it work if I put just a single condition in the expression. There isn't anything in the controller (yet) that tries to use or manipulate any of the ng-models in the HTML. I've come to the conclusion that there's something I'm missing with regard to the radio buttons, but I can't for the life of me figure out what.
Can anyone see what my mistake is?
you should use value property to bind special value for radio button, and when radiobutton's status is changed, the value will be kept at ng-model.
refer the code snippet below:
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.selectedValue = 'cleared';
$scope.cleared = false;
$scope.fraudulent = false;
$scope.reviewed = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel-body" ng-app='app' ng-controller="myCtrl">
<input type="radio" id="notFraudulentRadio" name="actionSelector" value="cleared" ng-model="selectedValue" /><label for="notFraudulentRadio"> Not Fraudulent</label><br />
<input type="checkbox" id="highVolumeCustomer" ng-model="highVolumeCustomer" ng-disabled="selectedValue === 'fraudulent' || selectedValue === 'cleared'" /><label for="highVolumeCustomer"> High Volume Customer</label><br />
<br/>
<input type="radio" id="isFraudulentRadio" name="actionSelector" value="fraudulent" ng-model="selectedValue"/><label for="isFraudulentRadio"> Appears Fraudulent</label><br />
<input type="checkbox" id="reportAccount" ng-model="reportAccount" ng-disabled="selectedValue === 'cleared' || selectedValue === 'reviewed'" /><label for="reportAccount"> Report Account</label><br />
<br/>
<input type="radio" id="markReviewed" name="actionSelector" value="reviewed" ng-model="selectedValue"/><label for="markReviewed"> Mark As Reviewed For Later</label>
<br>
cleared:{{cleared}}<br>
fraudulent:{{fraudulent}}<br>
reviewed:{{reviewed}}<br>
selectedValue: {{selectedValue}}
</div>
Using AngularJS, there is a requirement to show a dropdown with a selected value:
- When user selects a different value we should show a warning message and shouldn't proceed with update (save button disable).
- When user reverts to the original value, the message should hide and able to update (save button enable)
<select ng-model="vm.sldetails.AgencyGroupID" onchange=""
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="">Warning message</label>
Instead of calling an event in controller, can we achieve directly in Onchange event?
<div class="col-md-2">
<select class="form-control" ng-model="vm.sldetails.AgencyGroupID"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
</div>
HTML:
<label class="col-md-2 control-label text-align-left" id="lblWarningMessage" ng-if="vm.sldetails.AgencyGroupID==='your value'">Warning message</label>
In label tag,your value should be replaced by ur compare value
I guess you could try something like this:
<select ng-model="vm.sldetails.AgencyGroupID" ng-change="vm.selectChanged()"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="vm.showWarning">Warning message</label>
And in js:
vm.selectChanged = function(){
if(vm.sldetails.AgencyGroupID !== 'the initial value'){
vm.showWarning = true;
}else{
vm.showWarning = false;
}
}
I have a very interesting problem. Have 2 drop-downs, with options
0 = Exclude, 1 = Include, 3 = Only
When user want to select 3 from these 2 list, the other one should be changed to 0-Exclude. But when I try this code, its calling each other and in result the selected (3-Only) dropdown shows 0-Exclude and other 3-Only which is reverse.
Here is the code
Controller.js
$scope.lockedChanged = function() {
if ($scope.data.lockedGldata == 2) {
$scope.data.deactivatedGldata = 0;
}
};
$scope.deactivatedChanged = function () {
if ($scope.data.deactivatedGldata == 2) {
$scope.data.lockedGldata = 0;
}
};
View.html
<div class="form-group">
<label for="lockedGlOption" class="col-sm-3 control-label">Locked G/L:</label>
<div class="col-sm-3">
<select class="form-control" required ng-init="data.deactivatedGldata = 0"
id="lockedGlOption"
ng-model="data.deactivatedGldata"
ng-options="o.id as o.text for o in lockedGlOptions"
ng-change="lockedChanged()">
<option value="" disabled>Select an option...</option>
</select>
</div>
</div>
<div class="form-group">
<label for="DeactivatedGlOption" class="col-sm-3 control-label">Deactivated G/L:</label>
<div class="col-sm-3">
<select class="form-control" required ng-init="data.lockedGldata = 0"
id="DeactivatedGlOption"
ng-model="data.lockedGldata"
ng-options="o.id as o.text for o in DeactivatedGlOptions"
ng-change="deactivatedChanged()">
<option value="" disabled>Select an option...</option>
</select>
</div>
</div>
I think, that when you click on first select. It listen to change of model deactivatedGlData, and in lockedChanged function, which is assigned to ng-change of this dropdown, there is mismatch.
It listen to another dropdown, instead of self one, and that's why it's presenting in reverse.
Could you try to switch order of ng-change?
Instead of in two dropdowns in order:
ng-change="lockedChanged()">
ng-change="deactivatedChanged()">
Write:
ng-change="deactivatedChanged()">
ng-change="lockedChanged()">
After a couple of tries on fixing my code, and searching for any solutions on the net, I finally gave up and would like to ask help on you guys.
I'm working on multiple sets of radio buttons and turn them to star ratings:
imgur link on my ratings section (cause I am not able to post images)
Each star is represented with 1 radio button, and each row has 5 radio buttons. In this image, im creating 3 sets of 5 radio buttons. Using the ng-repeat feature,
<tr ng-repeat="number in called_numbers">
<td>
<div ng-if="number.name != null">
<span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="1"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="2"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="3"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="4"><i></i>
</span>
</div>
</td>
Now this specific page keeps on refreshing so when you click/highlight on a specific star, it refreshes and returns 5 blank stars again. What I did was that, I created an array to temporary store the value of each row.
$scope.temp_called_numbers = [];
$scope.rating_stars = {
value:0
};
and setting $scope.temp_called_numbers by:
rate_stars = function(){
for(i=0; i < $scope.called_numbers.length; i++){
$scope.temp_called_numbers.push( {rating: $scope.rating_stars});
}
}
The issue here now is that, when I select a star/radio button in one row, the other rows get the same value. For example, I select 1 star for row 1 which is temp_called_numbers[0].rating.value indexed 0, all the other rows get 1 star as well.
Any code change, reference or any help is much appreciated. Thanks!
$scope.temp_called_numbers = [];
$scope.rating_stars = {
value:0
};
rate_stars = function(){
rating = $scope.rating_stars;
for(i=0; i < $scope.called_numbers.length; i++){
angular.extend(temp_called_numbers, rating);
}
}
<tr ng-repeat="number in called_numbers">
<td>
<div ng-if="number.name != null">
<span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
</span>
</div>
</td>
</tr>
// Access selected items
angular.forEach($scope.called_numbers, function(value, index) {
if (value.checked) {
$scope.called_numbers[index].checked = isSelectAll;
}
});
For those checking on this thread. I've figure out that the issue here is not on the saving-to-array part, however, the issue is on the HTML side of the code.
Also, this was a visual bug on the stars and the array is fine and it stores the data when clicked. The reason that I was not getting the right data when clicking the radio button from 1 set of radio button group is because I was using <span></span> for the wrapper on the radio button.
what happened was that, even though I was getting 2 or more sets of Radio Button through ng-repeat, the page only accepts 1 radio button input.
By changing the wrapper to <form></form>:
<form class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
</form>
I can now get 2 or more different inputs from each set of radio button group.
I'm developing an app in mobile-angular-ui (angular+bootstrap).
In my login page, users can remember their credentials (username and password). Users' data ara saved in the localStorage.
That works fine. I can load users in my login page using datalist:
<form name="userForm">
<div class="form-group" ng-class="{ 'has-error' : submitted && userForm.username.$invalid && !userForm.username.$pristine }">
<label for="inputEmail" class="control-label">Username</label>
<input type="text" class="form-control" id="inputEmail"
name="username" ng-model="user.username" list="UserMemoList"
required>
</div>
<datalist id="UserMemoList">
<option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
value="{{item.username}}" >
</option>
</datalist>
I can select the item.username I want, but I'm not able to select the corresponding item.password.
My problem is that datalist doesn't work like select, and i cannot use ng-options. I have to use option+value to pass my value to the input.
<div class="form-group" ng-class="{ 'has-error' : submitted && userForm.password.$invalid && !userForm.password.$pristine }">
<label for="inputPassword" class="control-label">Password</label>
<input name="password" type="password" class="form-control" id="inputPassword"
ng-model="user.password" required>
</div>
I would be able to use a ng-change="theSelectedUserIs(item)", but I'm not able to pass the item object, because datalist is related to the username input, so I need to pass item.username.
Any idea?
I don't want to use typeahead because actually is deprecated in bootstrap3 or add other libraries/js/css.
I would like to do that only using angular and html.
My controller:
$scope.userMemoList = JSON.parse(localStorage.getItem('userList'));
var user = {};
LoginService.setUser(user);
userMemoList is an array of object like:
{"username":"admin", "password":"admin"}, ...
Thanks.
You can also pass with html data-id like so
in your angular js file
// when input name textbox change, check the value is same with datalist value or not. If value same, then bind that item.password to angular password model.
$scope.$watch "user.username", (newValue) ->
if newValue != null && newValue.lenght > 0
$("#locationlist option").each (index) ->
if $(this).val() == newValue
$scope.user.password = $(this).data("id") // this line will set your password text field
in your view
// pass user password via html5 (data-id) element like below
<datalist id="UserMemoList">
<option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
value="{{item.username}}" "data-id" = {{item.password}} >
</option>
</datalist>
This is how I solved this problem in my app. Use to wrap .
<input class="input form-control" placeholder="Search Conf by Application ID"
list="app_ids" ng-model="confs_app_id"/></th>
<datalist id="app_ids">
<select>
<option ng-repeat="app in app_list" value="{{app}}"></option>
</select>
</datalist>