So, I have two toggle buttons, the user must be able only to select one of the above two toggle buttons as show in the image below:
How can I achieve this ?
You can use Radio buttons : http://ionicframework.com/docs/v1/components/#radio-buttons
But if you want to use toggle button and achieve this thing, you can use $watch : Documentation
Ionic code:
<label class="toggle">Bride only
<input type="checkbox" ng-model="B">
<div class="track">
<div class="handle"></div>
</div>
</label>
<br>
<label class="toggle">Bride & Bridesmaids
<input type="checkbox" ng-model="B&B">
<div class="track">
<div class="handle"></div>
</div>
</label>
Angular code:
$scope.B=false; // for Bride only
$scope.B&b= false //for Bride and Bridesmaids
$scope.$watch('B',function(){
if($scope.B==true){
$scope.B&B=false;
console.log($scope.B&B);
}
});
$scope.$watch('B&B',function(){
if($scope.B&B==true){
$scope.B=false;
console.log($scope.B);
}
});
Hope this helps.
Related
I'm absolutely new to Angular.js, I got the file from someone to fix.
So the question is that I really want to change the div with clicking buttons, so I tried to search of it and i found the solution with radio button, but the thing is what i want to click is div.
So here is my code :
let vm = $scope
vm.isShown = function (color) {
return color === vm.color;
};
//this is the function in a controller
<div class="item">
<span class="group-name"
><p>PHASE 1.0</p>
Closed API Data Market</span
>
<input type="radio" ng-model="color" value="oneZero" /> 1.0
</div>
<div class="item">
<span class="group-name"
><p>PHASE 1.5</p>
Open API Data Market</span
>
<input
type="radio"
ng-model="color"
value="oneFive"
checked="checked"
/>
1.5<br />
</div>
</div>
</div>
<br />
<div class="servicePreparing" ng-show="isShown('oneZero')">
<img src="assets/img/serviceStop.jpg" />
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
I want to remove the inputs and want to click with div as class name as 'item'
You can see one example lives here: https://plnkr.co/edit/flMIhl6ugNUNXwpE
Also, what you have to do is set one variable (In the radio buttons were color), so in your AngularJS controller:
vm.color = '';
And set that value with ng-click in both divs, with the specific value, in your view you will have:
<div class="btn" ng-click="color = 'oneZero'">1.0</div>
<div class="btn" ng-click="color = 'oneFive'">1.5</div>
<div class="servicePreparing" ng-show="isShown('oneZero')">
One Zero Image Showed
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
One Five Image Showed
</div>
In my angular app I'm using ng-repeat to generate several radio buttons, the ultimate goal is to add a choiceSelected class (ngClass colour styling) to the label of the clicked radio input. I can add the style to the clicked button, BUT that style is added to every other clicked radio button and I end up with 5 coloured labels. Can't understand why.
Here is the HTML code:
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio" name="optradio" ng-model="isChecked" ng-value="$index" ng-click="selectAnswer($index,questionObject)">{{obj.body}}</label>
</div>
</div>
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
/*********************************************/
ng-model="isChecked"
ng-value="$index"
/*********************************************/
ng-click="selectAnswer($index,questionObject)">{{obj.body}}
</label>
</div>
</div>
Look at the lines inside the comments, clearly tells that your value of the checkbox($index) is binding to the isChecked variable.
By your, condition in ng-class isChecked==$index it is same for all the elements and so the class is applied for all radio buttons.
if you can update the Json of questionObject , can give you alternative option.
Assuming that questionObject contains the following json
[{
"body": "abc"
}, {
"body": "def"
}, {
"body": "aghi"
} ]
You can use the below code to make your result achieve
<div class="row" ng-repeat="obj in questionObject track by $index" >
<div class="radio" >
<label class="choice"
ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
ng-value="obj.body"
ng-click="selectAnswer($index,obj)">
{{obj.body}}
</label>
</div>
The method selectAnswer should make your work simple. Use this
$scope.selectAnswer=function(number,obj)
{
$scope.isChecked=number;
}
LIVE DEMO
NOTE: In your code the selectAnswer method call in HTML passes the
questionObject fully
Update 1
Reason for manually defining isChecked
Angular looks for the the value of isChecked in the scope because you have used ng-class in the
I have checkbox group:
<div class="checkbox">
<input type="checkbox" name="zainteresowany1" ng-model="zainteresowany1">Stażem
</div>
<div class="checkbox">
<input type="checkbox" name="zainteresowany2" ng-model="zainteresowany2">Pracą
</div>
And I would like to validate form if nothing checkbox is selected.
If nothing is selected: form is invaild.
How to make?
Make the ng-model attribute the same for both checkboxes and set the value attribute for what value you want each to have when that checkbox is selected. Then you can validate the form by making sure the variable you use for ng-model is not undefined.
Example:
<div class="checkbox">
<input type="checkbox" name="zainteresowany1" ng-model="zainteresowany" value="foo" /> Stażem
</div>
<div class="checkbox">
<input type="checkbox" name="zainteresowany2" ng-model="zainteresowany" value="bar" /> Pracą
</div>
Then in your controller:
if (!$scope.zainteresowany) {
// Form is invalid
} else {
// Form is valid
var value = $scope.zainteresowany;
}
Anyone have other solution ? '
I want to validate form and IF ANY CHECKBOX is selected i want to make form $inval
I create quiz app with angularjs and have some issues.
When I click "next" checked radio doesn`t reset
<div ng-repeat="answ in quiz.typical">
<label ng-click="quiz.checkAnsw()">
<input type="radio" name="answ{{quiz.qNum}}">
{{answ.text}}
</label>
</div>
Fiddle
How reset checked radio?
You could set values to the radio then bind them to a property via ng-model:
<div ng-repeat="answ in quiz.typical">
<label ng-click="quiz.checkAnsw()">
<input type="radio" name="answ{{quiz.qNum}}" ng-value="$index" ng-model="quiz.selectedAns" />
{{answ.text}}
</label>
</div>
and in the controller, reset the quiz.selectedAns to undefined:
this.changeQ = function(){
this.qNum++;
this.selectedAns = undefined;
};
JSFiddle: http://jsfiddle.net/zug5y/
I am trying to implement two way data binding using a model that is an array of objects in this format:
$rootScope["bBoxProps"] =[{
"bType": "sBusinessType",
"id":"sBusinessType",
"title":"business",
"options":[
{
"optId":"nyi",
"name":"nyi",
"isSelected":true,
"isDisabled":false,
"isInvalid":false
},
{
"optId":"local",
"name":"local",
"isSelected":false,
"isDisabled":false,
"isInvalid":false
}
],
"disabled":false,
"invalid":false
},{...},{...}];
To a radio group of two radio buttons within an ngRepeat as shown below:
<div class="buyBox" id="{{bBox.id}}" ng-repeat="bBox in bBoxProps" ng-class="{disabledBb: bBox.disabled, invalidBb: bBox.invalid}">
<div class="bbTitle"><h3>{{bBox.title | uppercase}}</h3></div>
<div class="bbSelect">
<div class="bbSelectTop bbSelectOpt">
<input type="radio" name="{{bBox.id}}" id="{{bBox.options[0].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[0])" ng-checked="bBox.options[0].isSelected" ng-disabled="bBox.options[0].isDisabled==true" ng-class="{invalidBbOpt: bBox.options[0].isInvalid}"/>
<label for="{{bBox.options[0].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[0].name | uppercase}}</div></label>
</div>
<div class="bbSelectBottom bbSelectOpt">
<input type="radio" name="{{bBox.id}}" id="{{bBox.options[1].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[1])" ng-checked="bBox.options[1].isSelected" ng-disabled="bBox.options[1].isDisabled==true" ng-class="{invalidBbOpt: bBox.options[1].isInvalid}"/>
<label for="{{bBox.options[1].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[1].name | uppercase}}</div></label>
</div>
</div>
</div>
Everything is working fine, except the "isDisabled" suboption is not binding to the radio button. When I set the flag to false through JavaScript, it does not reflect on the HTML and the radio button remains unchanged.
Am I doing something fundamentally wrong with the implementation or is something wrong with ngDisabled?
Solved the issue.. added ng-value and ng-model:
<div class="buyBox" id="{{bBox.id}}" ng-repeat="bBox in bBoxProps" ng-class="{disabledBb: bBox.disabled, invalidBb: bBox.invalid}">
<div class="bbTitle"><h3>{{bBox.title | uppercase}}</h3></div>
<div class="bbSelect">
<div class="bbSelectTop bbSelectOpt">
<input type="radio" name="{{bBox.id}}" id="{{bBox.options[0].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[0])" ng-checked="bBox.options[0].isSelected==true" ng-model="bBox.options[0].isSelected" ng-disabled="bBox.options[0].isDisabled" ng-class="{invalidBbOpt: bBox.options[0].isInvalid}" ng-value="true"/>
<label for="{{bBox.options[0].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[0].name}}</div></label>
</div>
<div class="buyOr">OR</div>
<div class="bbSelectBottom bbSelectOpt">
<input type="radio" name="{{bBox.id}}" id="{{bBox.options[1].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[1])" ng-checked="bBox.options[1].isSelected==true" ng-model="bBox.options[1].isSelected" ng-disabled="bBox.options[1].isDisabled" ng-class="{invalidBbOpt: bBox.options[1].isInvalid}" ng-value="true"/>
<label for="{{bBox.options[1].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[1].name}}</div></label>
</div>
</div>
</div>