I want to know how to deal with angular to display an element at a time when clicking a button .
The items are hidden by default and when there is no longer of elements the button is hidden.
FIRST STEP
div one ----> always display
div two ----> hidden
div three----> hidden
button ---> click
SECOND STEP
div one ----> always display
div two ----> visible
div three----> hidden
button ---> click
THIRD STEP
div one ----> always display
div two ----> visible
div three----> visible
button ---> click-->hidden
This is my exemple : http://plnkr.co/edit/PKx3pqrSwvyzhprBN8jI
But the example the two hidden items appear on the first click
<body ng-controller="MainCtrl">
<div><input type="text" placeholder="first input"></div>
<div ng-show="state.show"><input type="text" placeholder="second input"></div>
<div ng-show="state.show"><input type="text" placeholder="third input"></div>
<button ng-click="state.show=!state.show">Add input</button>
</body>
Thank you in advance for all your answers that could help me
You can do this by maintaining a counter:
$scope.show = 0;
$scope.incrementState = function () {
$scope.show++;
}
and then in the HTML:
<div ng-show="show >= 1"><input type="text" placeholder="second input"></div>
<div ng-show="show >= 2"><input type="text" placeholder="third input"></div>
If you only need two inputs this may be best for what you need, but if you want the number of inputs to be flexible you could use ng-repeat
<body ng-controller="MainCtrl as main">
<div ng-repeat="input in main.inputs track by $index">
<input type="text" placeholder="first input">
</div>
<button ng-click="main.inputs.push('another')">Add input</button>
And in the controller: this.inputs = ["first"]
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>
I am appending a div into the DOM on user click. To get the user entered values I want to attach ng-model to input fields. As I don't know the total number of div's which user will append, I want to keep the values in ng-model dynamic.
Here is the code: (my-Controller)
function addDiv() {
var element = angular.element(document.createElement('my-Directive'));
var el = $compile(element)($scope);
//where to place the element
angular.element($('#add')).append(element);
$scope.insertHere = el;
//giving unique id to div element.
var objName = 'step'+number;
dataCtrl.tbt = {
"val": objName,
"tes":"arjun"
}
$(element).attr("id",objName);
console.log(objName);
number++;
};
//html where I want to put dynamic ng-model
<div class="form-group">
<div class="col-xs-4">
<label for="target">Target:</label>
</div>
<div class="col-xs-7">
<input id="target" placeholder="Target" ng-model="dataCtrl.tbt[dataCtrl.tbt.val]" type="text" class="form-control"/>
</div>
You can use ng-repeat to add input boxes dynamically
<div ng-repeat="in in input">
<label>{{$index+1}}</label><input type="text" ng-model="in.value">
</div>
<button ng-click="addInput()">Add</button>
And push an empty value to the Array on ng-click of add button
Plunker Link
Hope this Helps!!
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
Basically I have two Divs in a page out of which only one will be visible at a time.
I have a text input placed inside my first div which is shown my default.
Now if the first div is hidden and the second DIV is shown,
I want to swap the text input DOM in to the second DIV. The ID of the textinput and the value it has needs to be retined on swapping.
I have a reference of the text input to be swapped in my custom directive (ref-comp in the below snippet).
How can i achieve this in angularJS ? Please help me here.
<div id="1">
<div id ="container1">
<input type="text" id="text1">
</input>
</div>
<div id ="container1">
<ref-comp id="ref1" refId ="text1">
</ref-comp>
</div>
</div>
Please have a look on it this might be help.
var app = angular.module('myApp', []);
app.controller('IndexCtrl', function($scope) {
$scope.showme = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="1" data-ng-app="myApp" data-ng-controller="IndexCtrl">
<div id ="container1" ng-show="showme">
value of text filed of div 1: {{divAVarialbe.text1}} <br>
<input type="text" id="text1" ng-model="divAVarialbe.text1">
</input>
</div>
<div id ="container1" ng-show="!showme">
value of text filed of div 2 : {{divBVarialbe.text1}} <br>
<input type="text" id="text1" ng-model="divBVarialbe.text1">
<ref-comp id="ref1" refId ="text1">
</ref-comp>
</div>
<button ng-click="showme = !showme" ng-show="!showme">Show div 1</button>
<button ng-click="showme = !showme" ng-show="showme">Show div 2</button>
</div>
You can use ng-show to swap the div and and scope variables to access the input filed of the DOM.
suppose that if use to scope variable lets say divAVarialbe and divBVariable.
then for div A divAVarialbe will be use i.e all the child model will be go inside divAVarialbe so your data str will be
divAVarialbe={"text1":"value of textfild","otherModel":"",...}
same for Div B.
In this way you can differentiate the DOM.
It base on how much you have knowledge of Object.
assume it like mvc pattern then it will be easy to code.
might be this will help.
I can't seem to get my div elements to show based on a hidden input value according to the code below:
<form method="post">
<fieldset data-ng-app="">
<input type="hidden" id="Method" name="Method" value="1" data-ng-model="methodType" />
<div data-ng-show="methodType=='1'">Method 1</div>
<div data-ng-show="methodType=='2'">Method 2</div>
</fieldset>
</form>
None of the div elements are being displayed when the page is loaded. It seems to work when I change the type of the input to "text", but then I had to manually type in the value into the field to get it to show/hide accordingly. May I get help with this?
Angular won't recognise setting the model to a value unless the input is interacted with — such as on a radio button.
If what you are trying to do is to set the model value on load, set it in a controller, or use data-ng-init instead of a hidden input.
<form method="post">
<fieldset data-ng-app="" data-ng-init="methodType = 1">
<div data-ng-show="methodType == 1">Method 1</div>
<div data-ng-show="methodType == 2">Method 2</div>
</fieldset>
</form>