I am trying to toggle a div on button click like as bellow.
This is working.
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
This is not working.
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
Why it is not working, when I add ng-if="$state.current.url!='/splash'" ?
Well,
Every angular directive create new scope
In the code below
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
The ng-if directive create new scope.And withing this scope
the value of x is updated on button click.But this new value of x is not accessible outside this ng-if div as it is local to that scope and it is primitive type.
Since this x is primitive type so there is no data update as reference are differant.
You should use object model instead.
Here is the updated HTML
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x.showHide = ! x.showHide'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x.showHide'>This is div</div>
define x like this one in your controller.
$scope.x = {showHide:false}
EDIT-
In your first woking HTML, there is not directive on div.So, both these DIV come under same scope.So,x accessible across this two DIV with updated value.
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
Related
I'm using ng-include for recursion. it's loading correct at first time but when I change anything in the object at run time, it doesn't reflect the changes on html. ng-include will create a child scope for that, so its not getting changes from parent scope. How can I bind the scope or reflect the changes in the html? Below is the code snippet for main.html
<div ng-switch on="value.length>0">
<div ng-switch-when="true">
<div ng-init="item = value[0];" ng-include="'test/views/partialTemp.html'">
</div>
</div>
</div>
In Partial Template
<div class="row" ng-repeat="(key, result) in item" ng-if="item ">
.......
<div ng-switch on="result.length > 0 ">
<div ng-repeat="tempValue in result">
<div ng-switch-when="true">
<div ng-init="item = tempValue;" ng-include="'test/views/partialTemp.html'"></div>
</div>
</div>
</div>
....
</div>
In JS File
onRadioButtonChange = function(key, value, item) {
var self = this;
self.serviceObj.Response.values = self.updateServiceObject(self.serviceObj.Response.values, key, value, false); // Updating the actual object which came from service
self.objectToShow = JSON.parse(JSON.stringify(self.serviceObj)); // Taking the actual object which will show in the HTML
self.objectToShow.Response.values = self.filterObjectToShow(self.objectToShow.Response.values); // it'll add/remove the child radio button
}
objectToShow is the object which I'm using to render the html
I have found an issue in AngularJS which relates to wrong update of view. It occurs from time to time. The problem is when model gets a new value, view is not updated by new model value, but old value is appended by new model value.
While troubleshooting I checked that model contains a correct value.
Here is a view.
<div class="container">
<div ng-repeat="p in point" id="{{'point-' + p.Id}}" class="{{p.BackgroundClass}}">
<div class="point-number">{{p.Id}}</div>
<div class="{{p.ImageClass}}"></div>
<div class="point-amount">{{p.Amount}}</div>
<div class="point-quantity">{{p.Quantity}}</div>
</div>
</div>
Controller code which contains SignalR events processing:
wetApiHubProxy.on('updatePointState', function (pointId, backgroundClassProp, imageClassProp) {
pointsService.getPointById(pointId).then(function (point) {
point.BackgroundClass = backgroundClassProp;
console.log('imageClassProp ' + point.ImageClass);
point.ImageClass = imageClassProp;
});
});
p.ImageClass is changing quite often. Changes/updates of view work in a correct way until sometimes occurs concatenation of old and new value.
Old p.ImageClass value is "point-state-configure".
New p.ImageClass value is "pump-state-off".
As a wrong result I have, where ImageClass contains concatenated values:
<div ng-repeat="p in points" id="point-4" class="point point-off" role="button" tabindex="0" style="">
<div class="point-number ng-binding">4</div>
<div class="point-state-configure pump-state-off" style=""></div>
<div class="point-amount ng-binding">926.93</div>
<div class="point-quantity ng-binding">417.35 L</div>
</div>
I have tried to call $scope.$apply() and $evalAsync, but that was hopeless. The strangest thing that issue occurs spontaneously. The only constant condition it's when $rootscope contains bigger amount of child scopes. Can anyone tell what place to dig and how to get rid of this problem?
class attribute is not intended to be used this way. You should use the ng-class directive instead.
I've created an example for you: https://jsfiddle.net/coldcue/o7q6gfs4/
JavaScript
angular.module('testApp', [])
.controller("TestController", function($scope) {
// Initialize the value
$scope.state = "state-blue";
// Change class on click
$scope.click = function() {
$scope.state = ($scope.state === "state-blue") ? "state-red" : "state-blue";
}
});
HTML
<div ng-controller="TestController">
<div ng-class="state">
Some label
</div>
<input type="button" ng-click="click()" value="Click me">
</div>
But there are many more ways to use ng-class, read more here: https://docs.angularjs.org/api/ng/directive/ngClass
I have in my index.html two separate places where I declare:
<div ng-controller="ParentController>
<div id="box1" ng-controller="SameController">
Box1 {{test}} <button ng-click="changeMe()">Click</button>
</div>
<div id="box2" ng-controller="SameController">
Box2 {{test}}
</div>
</div>
Initially in SameController, $scope.test = "One"
I want to make it so that when the user clicks the "Click" button, then {{test}} text will change to "Two" in both places (box1 and box2) (what the changeMe function does).
The problem is when I click, only the message in "Box1" changes to "Two", but not the message in "Box2". I tried using: $scope.$parent.test = "One" and make it so that SameController points to it, but it does not seem to work either.
How can I get around this so that both box1 and box2 change the text content of {{test}} when the button is clicked? The more elegant the solution the better.
Each element with ng-controller directive has its own scope, and they are not connected in any way. The most elegant solution is to set up a service for common application data.
app.value('commonData', {});
app.controller('SameController', function ($scope, commonData) {
$scope.data = commonData;
$scope.changeMe = function () {
$scope.data.test = 'test';
}
});
And use it like this
<div ng-controller="ParentController>
<div id="box1" ng-controller="SameController">
Box1 {{data.test}} <button ng-click="changeMe()">Click</button>
</div>
<div id="box2" ng-controller="SameController">
Box2 {{data.test}}
</div>
</div>
You can also hold common data in parent scope, but it is not recommended because both SameController are forced to be direct descendants of the same parent directive this way.
I have created a button like with angularjs,
<button class="btn btn-setting" ng-click="showSearch = ! showSearch" >
<img src="theme/images/settings.png" width="111">
</button>
And a div like ,
<div ng-include="'pages/include/search.html'" ng-show="showSearch" ></div>
I need to toggle the visibility of the above div on the button click.but it is not showing.
Update the showSearch model as follows
$scope.showSearch = {hideShowSearch : false}
Updated HTML
<button class="btn btn-setting" ng-click="showSearch.hideShowSearch = ! showSearch.hideShowSearch" >
<img src="theme/images/settings.png" width="111">
</button>
<div ng-show="showSearch.hideShowSearch" >This is the test</div>
EDIT -
In your script hideShowSearch is primitive one.So it does not perform two way data-binding.As result you not getting expected result.
Just do
<button ng-click="setshowme(show)"></button>
$scope.setshowme = function (value) {
if(value == true){
$scope.show = false;
}else{
$scope.show = true
}
}
Here is a simple JSFiddle
<button class="btn btn-setting" ng-init="showSearch = true" ng-click="showSearch = (showSearch) ? false : true;" >
<img src="theme/images/settings.png" width="111" />
</button>
<div ng-show="showSearch">Hello World</div>
First check these two elements (<button> & <div>) inside two ng-controllers
If so this will not work since ng-controllers have their own scopes. So that showSearch is in one scope and other controller scope do not have direct access to it.
Then check something like,
<div ng-show='showSearch'>show / hide div ...</div>
and see if this div is toggling its visibility.
if it working properly
then check the path to src of ng-include is correct.
here is a DEMO
I am a newbie in angularjs and needs to pass a model bind value in a function which is declared in controller but when I accesss that value from controller it says undefined. Below is the code
HTML:
<div>
<p g-bind-template>{{model.myname}}</p>
<div>
<div data-ng-controller="formCtrl" data-ng-init="init(model.myname)"></div>
</div>
</div>
In the above HTML when i do {{model.myname}} I can see the value but how to pass it in init method.
In Controller I have wrote a function
$scope.init = function (myname) {
alert(myname) // displays undefined
};
Your paragraph tag should be within the ng-controller in html. Make it like this:
<div>
<div>
<div data-ng-controller="formCtrl" data-ng-init="init(model.myname)">
<p g-bind-template>{{model.myname}}</p>
</div>
</div>
</div>