this is an angular question, with ng-show and bindings.
I have 2 fields that I don't want to show at the same time. One is show when the "show" is true, and the other on when it's false.
I have a dropdown that changes this "show" value when certain option is selected.
But here's the thing, there is a very short moment when the two are showing at the same time, even though they shouldn't. How is it possible, and how to fix that ?
I figured out why it wasn't instantly hiding : there is a default transition animation of 0.5s. You need to override that into the CSS, precisely, it's on the classes ng-hide-add and ng-hide-remove.
Here is the simplest working example of what you're asking. It changes instantly. It's hard to say what would be causing a lag without more insight into your particular situation.
var module = angular.module('test', []);
function PageCtrl($scope) {
$scope.msg = 'Select hide/show example';
$scope.showFirst = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="PageCtrl">
<p>{{msg}}</p>
<select ng-model="showFirst">
<option ng-value="true">First</option>
<option ng-value="false">Second</option>
</select>
<p ng-show="showFirst">This is paragraph one</p>
<p ng-hide="showFirst">This is paragraph two</p>
</div>
What you want to do is use ng-hide with ng-show instead. Then use $scope.value set to true for both. Initially ng-hide will be hidden and ng-show will be shown then when you toggle to false for $scope.value it will flip in reverse. Basically don't use two ng-shows but you use a combination of both ng-hide and ng-show.
Related
I am working on an app that submits the form and get the result from the server which followed by HTML table view. My input form is a bit big which covers whole the screen. When the table comes then I want automatically scroll down at the table view. I used $anchorScroll from angularJs. But I am not able to achieve the result what I want. I also used $timeout to make sure the table is already exist or not and then perform $anchorScroll, but still no success. (based on this solution : Using $location and $anchorScroll to scroll a table row into view
Hear is my code.
HTML
<div data-ng-controller="searchController as searchCtrl" id="scrollArea">
<form>
//HTML input elements
<div class="buttons">
<md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
</div>
</form>
</div>
<!-- Smart Table for displaying result -->
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">
//table content
</div>
Controller
angular.module('myApp')
.controller("searchController", function($log, searchService, $scope, $location, $anchorScroll, $timeout){
var self = this;
self.gotoTable = function(resultTable)
{
$timeout(function() {
$location.hash(resultTable);
$anchorScroll();
});
};
});
I dont know why its not working?
Do i need to define the id scrollArea and resultTable in my CSS?
Any help would be appreciated.
Thanks in advance.
UPDATE
Based on Okazari's solution, I tried to put a another div with many br tag above at the very bottom of my HTML. Now When I refresh the page then it automatically scroll to that div tag without clicking Start. this is a bit weird. I also tried to cover the
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">
tag with another div tag with id = "resultTable".
But still it did not work.
You actually are invoking your function without any parameters
ng-click="searchCtrl.gotoTable()"
whereas in your controller you expect to have one :
self.gotoTable = function(resultTable)
Try something like this
ng-click="searchCtrl.gotoTable('resultTable')"
or this :
self.gotoTable = function()
{
$timeout(function() {
$location.hash("resultTable");
$anchorScroll();
});
};
(just one, not both)
Hope it helped.
EDIT : Pretty sure that you can't go to a hidden div. As i said in comment your ng-show may be evaluated to true when you try to anchorscroll().
Here is a working plunker without ng-show. I'll build a tiny solution to avoid the ng-show issue.
To avoid this side effect, i wrapped the div with ng-show with another div.
<div id="resultTable">
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0">
</div>
I cannot seem to get the correct way to set the 'checked' attribute in ons-switch. This is so that I can setup user configurations page with pre-checked select boxes.
The Docs:
This is a checked switch but how do I set this using a variable in an angular controller?
For example, if ons-switch has a syntax like
I could have done:
I cannot seem to set attribute "checked" with no value in angular, as needed in the docs. I'm also unable to access the variable since it is part of an array of configurations.
Code Example:
controller:
var categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isChecked:false}];
html:
<ons-list-item ng-repeat="interest in categInfo" >
<span style="color: #666">{{interest.Interest}}</span>
<ons-switch modifier="list-item" var="{{interest.Interest}}" checked="{{interest.isChecked}}"></ons-switch>
</ons-list-item>
So what I want is that the html should show buttons that are checked/unchecked depending on interest.isChecked is true or false.
First of all, you need to bind the switch with ng-model, this will allow you to manage the ons-switch behavior directly from the controller. Setting the variable true or false, inside the controller, will automatically change the value of the state of the switch, same thing if you change the state from the switch (AngularJS binding).
If you want to check the status of the switch, you need to check the model value.
Here is a CodePen example. and the relative code.
HTML
<div ng-controller="MyController">
<ons-switch ng-model="switch"></ons-switch>
<ons-button ng-click="changeSwitch()">Change switch status</ons-button>
</div>
Controller
ons.bootstrap()
.controller('MyController', function ($scope) {
$scope.changeSwitch = function() {
$scope.switch = !$scope.switch;
if($scope.switch)
alert('checked');
else
alert('unchecked');
};
});
EDIT: SWITCH ARRAY EXAMPLE
Due to an Onsen UI bug about the initialization of the ons-switch element, I suggest you to use the following code to implement your switch.
<label class="switch">
<input type="checkbox" class="switch__input" checked>
<div class="switch__toggle"></div>
</label>
The appearance will be the same as the ons-switch element. This bug will be fixed in Onsen UI 1.4 release, so you can start using again the switch element after its release.
For what concerns the behavior of an array of switches, it's analog of the single switch. You still need to use 'ng-model' to bind the status of the switch. You are using ng-repeat to display the switch elements so, by using ng-model="item.isChecked", every element will be binded with the relative isChecked value inside the array. Here you can find a working CodePen example, and this is the relative code:
HTML
<div ng-controller="MyController">
<h2>What I am trying</h2>
<div ng-repeat="item in categInfo">
<div>This button should be {{item.isChecked}}</div>
<label class="switch">
<input ng-model="item.isChecked" type="checkbox" class="switch__input" checked>
<div class="switch__toggle"></div>
</label>
</div>
</div>
Controller
ons.bootstrap()
.controller('MyController', function ($scope, $timeout) {
//Need to go through the array and set as checked or not
$scope.categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isChecked:false}];
});
I'm trying to make a check box that should be ticked when a value from the controller is filled (!= null).
It also need to be able to be ticked off and on, but I can't get it to work:
<input type='checkbox'
ng-false-value="''"
ng-model="entry[element.propertyName]"
id="q{{element.id}}"
ng-checked="entry[element.propertyName] != ''"
>
The check box is ticked when entry[element.propertyName] is filled, so far so good. But when I untick the check box the model remains unchanged, even though I've set ng-false-value, and the 'selected=selected' attribute doesn't disappear. When I tick and untick again, then the model starts to change to true and ''
Should be the easiest thing in the world, what am I missing here?
I'm using Angular 1.3.11
I have no idea why you are using ng-false-value, never saw that before.
Here is a snippet with a button updating a checkbox.
function testCtrl($scope){
// Initialise the checkbox as unckecked
$scope.testIsChecked=false;
// This function makes the checkob checked
$scope.makeItCHecked = function(){
$scope.testIsChecked=true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="testCtrl">
<div><input type="checkbox" ng-model="testIsChecked">
$scope.testIsChecked value : {{testIsChecked}}</div>
<button ng-click="testIsChecked=true">Make it checked</button>
</div>
</div>
See this link for explanation.
You can include the array in an object like:
public class objElement
{
string[] propertyName;
}
and then bind to your checkbox.
All of the examples I have found show the radio button group being built by some for item in items loop but none of them show a simple accessing of the radio button group array in the angularjs controller. What I need to do is traverse through the button group array to see if any of them are in "selected" state.
var radioSelected = false;
for(var i =0; i < items.length; i++) {
if(items[i].selected) {
radioSelected = true;
}
}
I have tried binding to the ng-model and accessing it .. I have tried using $scope.ButtonGroupName Nothing yeilds an array that I can traverse with a loop. Any suggestions on how to do this once VERY simple activity would be greatly appreciated.
Gotta love being forced to relearn web development because somebody broke out a new shiney hammer.
You would not traverse the DOM elements. You would use the same ng-model for all the radio elements, and that would be updated whenever you change the selected state of the radio button.
<input type="radio" ng-model="assignedValue" name="myRadio" value="one">
<input type="radio" ng-model="assignedValue" name="myRadio" value="two">
<input type="radio" ng-model="assignedValue" name="myRadio" value="three">
You would $watch the $scope.assignedValue for changes instead of traversing the DOM elements.
$scope.$watch('assignedValue', function (newValue, oldValue) {
..do stuff here
});
See here for documentation: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
The reason you don't traverse the DOM is because it's constantly changing. The whole point of Angular is to work off of data and not the elements themselves.
Update: Based on your comments, it sounds like only want to execute an action if a radio button has been selected.
First, a radio button should always have a selected state. Let's pretend it doesn't though. You can enable / disable / show / hide elements in angular in a couple of ways without writing additional DOM manipulation code.
Taking the example above, this button will only be enabled if the assignedValue is two.
<button ng-disabled="assignedValue != 'two'">My button</button>
You can also conditionally include content using ng-if:
<div ng-if="assignedValue == 'two'>
My conditional content
</div>
This will also work with ng-switch
<div ng-switch on="assignedValue">
<div ng-switch-when="two">My additional content</div>
<div ng-switch-default>Here's switch fallback content</div>
</div>
In my case AngularJS's select is not a good fit - (with ng-repeat approach <option> values can only be strings and with ng-options I can't properly set the initial selected value).
What can I do to stop angular from applying select directive everywhere he sees <select> element ?
The reason I am asking this question, is because I want to apply a custom directive on select element, that would perform something similar like the original one, so they would be conflicting.
Is this what you need?
HTML:
<div ng-app="angularApp">
<div ng-controller="testCtrl">
<select ng-model="initialSelectedValue" ng-options="option for option in [1,2,3]"></select>
</div>
</div>
Javascript:
angular.module('angularApp', []);
function testCtrl($scope)
{
$scope.initialSelectedValue = 2;
}
I created the following jsfiddle for it.