I'm new at learning AngularJS and what I'm trying is to display an image if a checkbox is checked.
<body ng-app="imgApp" ng-controller="imgCNTRL">
<li class="stay-item" name="hotel" id="hotel1">
<h2>Hotel Grande Bretagne</h2>
<img src="https://www.fivestaralliance.com/files/fivestaralliance.com/field/image/nodes/2009/10181/10181_0_hotelgrandebretagne_fsa-g.jpg">
<p class="img__description">
Facilities
<br><br>
2 swimming pools
<br>
Free WiFi
<br>
Parking
<br>
Spa / Sallon
<br>
Bar
<br>
</p>
<br><br>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="reserv" name="reserv">
<label class="form-check-label" for="reserv">Reservation</label>
</div>
</li>
My code so far is this:
<script>
var app = angular.module('imgApp', []);
app.controller('imgCNTRL', function($scope){
$(document).ready(function(){
$('input[name=reserv1]').click(function(){
alert('ok');
$scope.img1 = "https://t-cf.bstatic.com/xdata/images/hotel/max1024x768/328010584.jpg?k=f8243c30e30a6671e3a618ed132f42d10bccd185b464caec8e7bbcb82915d837&o=&hp=1";
});
});
});
</script>
What I want to achieve is, If I click the button with the id="reserv", this image would be displayed(image). Is there any convenient way to achieve that?
Just add an ng-model="reserv_chk" to your checkbox and an ng-show="reserv_chk" to your img:
https://codesandbox.io/s/zealous-edison-uue0ti?file=/index.html
Related
I have a rails application which use AngularJS and I have a problem with a form, the problem is that I want to use a checkbox to send values true or false, but it only send true if it's checked and false if it's checked and unchecked after that, but if the user doesn't touch the checkbox, then it's not even sent as parameter.
<div class="checkbox">
<label>
<input type="checkbox" ng-model="car"> Do you have a car?
</label>
</div>
What can I do to make it send false if it the user doesn't ever check it?
Edit: The entire form is this, BTW, the form it's about creating a Poll, the car thing was just an example...
<h1>Create Poll</h1>
<form ng-submit="addPoll()" style="margin-top:30px;">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="title"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea type="text" class="form-control" ng-model="description"></textarea>
</div>
<br>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="allow_anonymous_answer" ng-false-value="false"> Allow anonymous answers
</label>
</div>
<br>
<div class="form-group">
<label>Welcome message</label>
<textarea type="text" class="form-control" ng-model="initial_message"></textarea>
</div>
<div class="form-group">
<label>Outgoing Message</label>
<textarea type="text" class="form-control" ng-model="final_message"></textarea>
</div>
<button type="submit" class="btn btn-primary" style="float: right;">Continue</button>
</form>
When you hit Continue I make HTTP POST request with Restangular to create a Poll, but the problem is that when I don't touch the checkbox this is what I see in the log of Rails...
Started POST "/polls.json" for 127.0.0.1 at 2016-01-26 14:05:57 -0300
Processing by PollsController#create as JSON
Parameters: {"title"=>"asddddddddddddddda", "description"=>"aaaaaaaaaaaaaaaaaaaaa", "initial_message"=>"asdasdddddddddd", "final_message"=>"aaaaaaaaaaaaaaaaaaad", "poll"=>{"title"=>"asddddddddddddddda", "description"=>"aaaaaaaaaaaaaaaaaaaaa", "initial_message"=>"asdasdddddddddd", "final_message"=>"aaaaaaaaaaaaaaaaaaad"}}
Note that the parameter allow_anonymous_answer doesn't even appear, if I check the checkbox then I can see that the parameter is set as true, if I check it and then uncheck it, then it's set as false, but the problem is when the user doesn't even touch this, when this happens then the parameter is not even shown...
Just in case you wanna see, this is the controller of AngularJS...
angular.module('myapp').controller('CreatePollCtrl', ['$scope', 'Restangular',
function($scope, Restangular) {
Restangular.setFullResponse(true);
$scope.addPoll = function() {
var poll = {title: $scope.title, description: $scope.description, allow_anonymous_answer: $scope.allow_anonymous_answer, initial_message: $scope.initial_message, final_message: $scope.final_message};
Restangular.all('polls').post(poll).then(function(response) {
});
};
}]);
I think you should put a variable in your controller to achieve the binding between your HTML component and your JS code.
I am currently developing an Angular app, and what i do is to initialize all the ng-model variables in the first lines of my controller, so why dont you give a try to this:
In your first controllers lines:
$scope.allow_anonymous_answer = false;
Did you take a look at angular docs: https://docs.angularjs.org/api/ng/input/input[checkbox]
You can explicitly state what value the checkbox should send when it is not selected using ng-false-value
Add an ng-click to that checkbox and update the model there. Works fine.
<div class="checkbox">
<label>
<input type="checkbox" ng-model="car" ng-click="updateCar(this)">Do you have a car?</input>
</label>
</div>
In your controller:
var updateCar = function(checkbox) {
if (checkbox.checked) {
car = false;
}
else {
car = true;
}
}
I solved it...
In the controller
if ($scope.allow_anonymous_answer == null)
$scope.allow_anonymous_answer = false
I am taking information from my database and trying to figure the best way to display it within the app.
This is my database info
[{"form_input_id":"1","form_id":"6","title":"Please enter your room number?","input_type":"text","identifer":"room","choices":"s:0:\"\";","heading":"Valet Request"},{"form_input_id":"2","form_id":"6","title":"Please enter any comments or feedback.","input_type":"textarea","identifer":"feedback","choices":"s:0:\"\";","heading":"Valet Request"},{"form_input_id":"3","form_id":"6","title":"Please choose office","input_type":"select","identifer":"office","choices":"s:19:\"Sales, Reservations\";","heading":"Valet Request"},{"form_input_id":"18","form_id":"6","title":"Last Name","input_type":"text","identifer":"Last_Name","choices":"s:0:\"\";","heading":"Valet Request"},{"form_input_id":"19","form_id":"6","title":"Type of Car","input_type":"select","identifer":"Car_type","choices":"s:20:\"Buick, Olds, Ferrari\";","heading":"Valet Request"}]
I am able to pull everything the way I want to except choices. I am trying to create dynamic forms and need to create a select showing the choices.
My current controller:
controller('FormCtrl', function($scope, $ionicLoading){
// Grab Form
var form = angular.fromJson(window.localStorage.getItem('form'));
// Set Title
$scope.title = form[0].heading;
// Send Form Data
$scope.forms = form;
})
And my view:
<ion-view title="Form" hide-nav-bar="true">
<ion-header-bar align-title="left" class="bar-dark">
<div class="buttons">
Cancel
</div>
</ion-header-bar>
<ion-content id="dynamic" scroll="true" padding="true">
<h2 class="text-center">{{title}}</h2>
<form>
<div ng-repeat="form in forms">
<label>{{form.title}}</label>
<div ng-if="form.input_type == 'text'">
<input type="text" name="{{form.identifier}}" />
</div>
<div ng-if="form.input_type == 'time'">
<input type="time" name="{{form.identifier}}" />
</div>
<div ng-if="form.input_type == 'textarea'">
<textarea name="{{form.identifier}}"></textarea>
</div>
<div ng-if="form.input_type == 'select'">
<select name="{{form.identifier}}">
NEED TO FIGURE HOW TO DISPLAY CHOICES AS OPTIONS
</select>
</div>
</div>
</form>
</ion-content>
You need to parse your options from string. Something like that:
angular.forEach($scope.forms, function(item){
item.options=item.choices.split('"')[1].split(',');
});
And tnen use ng-options in select:
<select name="{{form.identifier}}" ng-options="choice for choice in form.options" ng-model="Your model here"></select>
https://docs.angularjs.org/api/ng/directive/ngOptions
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
This is the HTML code they had to demonstrate "Sharing Data Between Controllers" but the bindings inside FirstCtrl and SecondCtrl didn't work for me. Is this way of binding not included in Angular 1.3?
Controllers
function FirstCtrl($scope) {
}
function SecondCtrl($scope) {
}
Original Tutorial Link
Fiddle
As of angular 1.3 you can no longer use global functions as controllers, you must explicitly add them to your module.
Name your module in your markup ng-app="my-app"
Create a module in code var app = angular.module('my-app', []);
Add your controllers to the module app.controller('FirstCtrl', FirstCtrl)
Enjoy data binding
I am having hard time figuring out how to work with radio buttons in Angular. Here is my fiddle:
http://jsfiddle.net/3bp2t4ma/
<div class="form-row full-width pull-left text-center check-as">
<label> <input name="ticket" type="radio"
ng-model="ticketType.type" ng-value="query"> Query
</label> <label class="complaint-check"> <input name="ticket"
type="radio" ng-model="tickeType.type" ng-value="complaint">
Complaint
</label>
</div>
{{ ticketType | json }}
And javascript:
var myApp = angular.module('myApp', []);
function Main($scope) {
$scope.ticketType={type: 'query'};
}
Any idea why ticketType becomes empty when I click on radio button?
Well, there is one obvious typo in the Complaint button: ng-model="tickeType.type"
You're missing a t.
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>