Show/Hide divs depend on dropdown select in AngularJS - angularjs

I am trying to show a div depending on what is selected from the drop down list. For example, if a user selects 'Cash' from the list show Cash div or if the user select 'Check' from the list show Check div
I have put together sample but its incomplete and needs to wire-up
http://jsfiddle.net/abuhamzah/nq1eyj1v/
Also when the user change the selection I would also like to clear the previous selection so when the user goes back to the previous selection they should not see.
<div ng-controller="MyCtrl">
<div class="col-xs-12">
<label class="col-xs-6 control-label">Type:</label>
<div class="col-xs-6">
<select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
<option ng-option value="Cash">Cash</option>
<option ng-option value="Check">Check</option>
<option ng-option value="Money Order">Money Order</option>
</select>
</div>
</div>
<div class="col-xs-12" id="cash">
<div >
<label class="col-xs-6 control-label">Cash :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.cash" />
</div>
</div>
</div>
<div class="col-xs-12" id="check">
<div >
<label class="col-xs-6 control-label">check :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.check" />
</div>
</div>
</div>
<div class="col-xs-12" id="money_order">
<div >
<label class="col-xs-6 control-label">money_order :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.money_order" />
</div>
</div>
</div>
</div>
//controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeme = function() {
alert('here');
}
}

you didnt initialize as the angular app coz u missed the ng-app directive first
and this is the solution using ng-if
DEMO
<div ng-app="myApp" ng-controller="MyCtrl"> // initialize as a angular app
<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> // this div will show if the value of `payment.type` model equals to `cash`. and so on.

Related

angular not update file from app services

Does anyone know why angular does not update the file in the browser? I try to use the incognito also same. the file recently I update not reflect on the browser. ng-repeat.
the HTML:
<body ng-app="cgpaCalculator">
<div class="card" ng-controller="cgpaCtrl">
[...]
<div class="row" ng-repeat="number in data.rows track by $index">
<div class="col-lg-5 mb-2">
<div class="form-label-group">
<input type="text" name="course_name" id="course_name" class="form-control" placeholder="Course Name [Optional]">
<label for="course_name">Course Name [Optional]</label>
</div>
</div>
<div class="col-lg-3 mb-2">
<div class="form-label-group">
<select class="form-control custom-select" ng-model="data.rows[$index].grade" ng-options="grade for grade in grades track by grade">
<option value="" disabled selected>Select Grade</option>
</select>
</div>
</div>
</div>
The Controller:
I don't know what i'm doing wrong.

Select multiple radio options in angularjs issue

I want to select multiple radio options.New to angularjs.
Steps to produce the issue:
Select any country from the 1st select menu -> Choose Reason A
Select any country from the 2nd select menu -> Choose Reason C
here the above Reason A option disappears and only Reason C is selected.
i want to hold the two different reasons for different countries section.
here is the fiddle
http://jsfiddle.net/Lini7/knfsv64m/8/
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.showReasonA = function showReasonA(checkNoTin) {
console.log("print the notin value from data",this.item.noTin);
if (!this.item.country) return false;
var selectedCountry = this.item.country.country.toLowerCase();
var fourCountries = ["cayman islands", "albania"]
var isIt = fourCountries.indexOf(selectedCountry) >= 0;
console.log("print match country val",isIt);
console.log("get checknotin value before assign",checkNoTin);
if (checkNoTin) this.item.noTin = true;
console.log("final checknotin val",checkNoTin);
return isIt;
}
});
and the view
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
To make some input as hidden you can use
<p ng-show="condition">I'm shown</p>
and this condition value should be initialized in the scope of your controller
$scope.condition=true/false
to hide an show input you can use ng-if. Its better to use ng-if for dynamic inputs . see details here
Now for your case you can use item.reason in the condition to show and hide your input .
<input type="radio" name="reason" ng-model="item.other" ng-value="C" required="required" ng-if="item.reason='object:836'" />
Finally got the solution
I just added the radio button name with index then it worked which will give different names for each group of buttons.
name='reason_{{$index}}'

Get Position of selected checkbox AngularJS

I want to retrieve the position of a checked value :
HTML:
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" ng-value="{{i-1}}" name="score1"/>
<br>
{{score1}}
<textarea ng-model="options[i-1]" class="form-control"></textarea>
</div>
</div>
</div>
Controller:
$scope.score1=[];
The following solves my initial problem:
HTML
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" name="score1" ng-value="{{i-1}}" ng-true-value="'checked'" ng-false-value="'unchecked'"/>
<br>
<textarea ng-model="options[i-1]" class="form-control" ></textarea>
</div>
</div>
</div>
Controller
$scope.options=[];
$scope.score1=[];
$scope.scores=[];
angular.forEach($scope.score1,function(value,key){
if (value ==='checked'){
$scope.scores.push(key);
}
});

Radio button is not clickable in ng-repeat

I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>

Clear the previous input once the selection is selected

How would I clear the input box once the user select from dropdown using angularjs.
every time clear the input box once the selection is made.
here is what I put together the sample:
http://jsfiddle.net/abuhamzah/jb1j3w7x/
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-xs-12">
<label class="col-xs-6 control-label">Type:</label>
<div class="col-xs-6">
<select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme(payment.type)" >
<option ng-option value="Cash">Cash</option>
<option ng-option value="Check">Check</option>
<option ng-option value="Money Order">Money Order</option>
</select>
</div>
</div>
{{ payment.cash }}
<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'">
<div >
<label class="col-xs-6 control-label">Cash :</label>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12" id="check" ng-if="payment.type == 'Check'">
<div >
<label class="col-xs-6 control-label">check :</label>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12" id="money_order" ng-if="payment.type == 'Money Order'">
<div >
<label class="col-xs-6 control-label">money_order :</label>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12" ng-if="payment.type == 'Check' || payment.type == 'Money Order' || payment.type == 'Cash'">
<div >
<div class="col-xs-6"><input type="number" class="form-control" ng-model="payment_input"/>{{payment.type}}</div>
</div>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeme = function() {
alert(payment.type);
payment_input='';
}
}
You can do this more easily with $watch, which is designed for this purpose.
In your controller:
$scope.$watch('payment.type', function (newVal, oldVal) {
$scope.payment_input = 0;
// anything else you want to do when the payment type is changed
})
Now whenever payment.type is changed, these lines will be executed.
Here are more docs: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
EDIT
Here is a working fiddle with your code: http://jsfiddle.net/jb1j3w7x/5/
You need to use ng-show instead of ng-if for input element container because the following reason
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Approach 1: (using controller)
Working demo: http://jsfiddle.net/jb1j3w7x/2/
Approach 2: (you can update the model without controller)
Working demo: http://jsfiddle.net/jb1j3w7x/4/
Also,
You have missed to add $scope for updating the number field
Number field should be updated as number. we cant update as empty
text

Resources