How do I toggle the view of an article by clicking a <button>?
<button ng-click="/* change view and button label */">Label</button>
<article ng-if="/* */">
<h1>{{title}}</h1>
<p>{{content}}</p>
</article>
<article ng-if="/* */">
<input type="text" value="{{title}}">
<textarea>{{content}}</content>
</article>
You need to maintain one scope variable showInputsArticleWithInput & do toggle it on click of button using ng-click directive.
As you want to change your button text for that you could use ng-bind directive with expression like ng-bind="showInputsArticleWithInput? 'Edit': 'Close'"
Markup
<button type="text" ng-click="showInputsArticleWithInput = !showInputsArticleWithInput"
ng-bind="showInputsArticleWithInput? 'Edit': 'Close'"></button>
<article ng-if="!showInputsArticleWithInput">
<h1>{{title}}</h1>
<p>{{content}}</p>
</article>
<article ng-if="showInputsArticleWithInput">
<input type="text" value="{{title}}">
<textarea>{{content}}</content>
</article>
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>
Not sure what I am doing wrong here.
I want to display an ng-message after the user submit the form. However , the message is shown when the form is rendered. It seem like the ng-show is not evaluating.
I printed the field in the expression and it is false when I open the form. Also, I change it to ng-hide but I have the same issue.
Can you please have a look ..
<div class="small-12">
<label>first name
<span class="field-error"> *</span>
</label>
<input name="firstName"
type="text"
maxlength="25"
ng-disabled="isSubmitting" required
ng-model="candidate.firstName"
ng-class="{error:isFormSubmitted && contactForm.firstName.$error.required}" />
<div ng-messages="forms.contactForm.firstName.$error"
class="errorFormLabel" role='alert'>
<div ng-message="required"
ng-show="isFormSubmitted">This is a required field {{isFormSubmitted}}
</div>
</div>
</div>
Think about ng-messages as a switch clause, you can nest the /ng-show/ng-hide inside ng-message directive but not use them together
For example:
<div ng-messages="forms.contactForm.firstName.$error"
class="errorFormLabel" role='alert'>
<div ng-message="required">
<span ng-show="isFormSubmitted">This is a required field {{isFormSubmitted}}</span>
</div>
</div>
</div>
If you don't want an extra element: <span>, try ng-if, basically ng-if has the priority higher than any other angularjs directive and it will force the ng-message directive to be removed from the DOM tree if the expression is not positive.
<div ng-message="required"
ng-if="isFormSubmitted">This is a required field {{isFormSubmitted}}
</div>
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>
I have a form which represents an object and an array of sub-objects contained in a repeater. I want to dynamically add sub-objects to the array. When I add a sub-object the form gets submitted unexpectedly.
See this example:
http://plnkr.co/edit/TUblgmb7N710nPL7s5tU?p=preview
My form looks like this:
<form ng-submit="handleSubmit()" ng-controller="TestController">
<div>Some Input: <input type="text"></div>
<div ng-repeat="obj in model.children">
<input type="text" ng-model="obj.text" />
</div>
<button ng-click="addChild()"> Add Child</button>
</form>
The controller looks like this...
Controllers.controller('TestController', ["$scope", function($scope) {
$scope.model = {
name: "Some Text",
children: []
};
$scope.handleSubmit = function() {
alert("Form Submitted!");
}
$scope.addChild = function() {
$scope.model.children.push({text:"Foo"});
}
}]);
Click the "Add Child" buttton. The UI is updated as expected but the form gets submitted.
I can work around this by putting the submit function in ng-click on the Save button instead of ng-submit on the form but this seems like unexpected behaviour. Can anyone explain?
The default attribute type The HTML button tag <button>My Button</button> triggers the submit event as <input type = "submit"...> does.
Now, following the idea of #GruffBunny, I have added a pInputType parameter to your method to show what button was clicked:
$scope.addChild = function(pInputType) {
$scope.model.children.push({text:"Foo", inputType : pInputType });
}
Then in the HTML block, the attribute inputTypewas added within the loop as follow:
<div ng-repeat="obj in model.children">
<hr />
<h3>{{obj.inputType}}</h3>
<div>New Input: <input type="text" ng-model="obj.text" /></div>
</div>
Finally, here are the buttons for testing the code:
<!-- With Input Type -->
<h2>Input type Button</h2>
<input type="button" ng-click="addChild('Input type Button')" value="Btn Add Child" />
<hr />
<!-- With Normal Anchor -->
<h2>HTML Anchor</h2>
Add Child Link
<hr />
<!-- Adding Bootstrap -->
<h2>HTML Bootstrap Anchor</h2>
Add Child Link
<hr />
<!-- Button Tag -->
<h2>HTML Button Tag (Triggers SUbmit Events)</h2>
<button ng-click="addChild('Triggers Submit Events')">Add Child</button>
<hr />
Here is the complete plunker: http://plnkr.co/edit/N4hSjG
For further information about this behavior, you can read this Stack Overflow question: <button> vs. <input type="button" />. Which to use?
I hope it could be useful this explanation for anyone.
I am creating a form for each item in my $scope. ng-model is not linking with the data on my form submit.
<li ng-repeat="item in favourites">
<form ng-submit="DeleteFavourite()" class="form-horizontal" id="frmSpec">
<input ng-model="item.Description"/>
<input ng-model="item.Refno"/>
<button type="submit"class="btn">{{item.Description}}
<span class="glyphicon glyphicon-remove"></span>
</button>
</form>
</li>
The issue is very closely related to the comment by #DavidBeech . In an angular controller the scope is seen as a hierarchy object.
So for example if you have the following:
<div ng-controller="SomeCtrl">
<li ng-repeat="item in favourites">
<form ng-submit="DeleteFavourite()" class="form-horizonatal" id="frmSpec">
<input ng-model="item.Description"/>
<input ng-model="item.Refno"/>
<button type="submit"class="btn">{{item.Description}}
<span class="glyphicon glyphicon-remove"></span>
</button>
</form>
</li>
</div>
When that controller is injected into the div and that new scope instance is created it only sees what is at that level and the scopes of it's parents. It has no knowledge of its children's scopes. Therefore, when you call DeleteFavourite() since it is a method attached to the scope of the controller it will not have the context of the ng repeat. So as David stated you will need to do something like DeleteFavorite(item) in order for it to have knowledge of what you are submitting otherwise you will not have knowledge of what item in the iteration you are submitting.
Feel free to comment if you want an example and I can put together a fiddle with an example of scope inheritance.