Here I have a div in the ng-repeat
<div ng-class="{div0f:result.subscribed==omega.harish,div0g:!result.subscribed==omega.harish}" id="mecota0f"
ng-click="omega.harish=!result.subscribed" >
Now here result.subscribed is a boolean value coming from the services and omega.harish is my simple boolean variable
the class of this div will be according to the result.subscribed value
Now I also want to change the active class of the one of the div created in the ng-repeat but the class of other created divs are kept getting affected.
var app = angular.module('subscribeWho', ['ngResource']);
app.controller('mysubscribeWho', ['subscriberFactory',
function(subscriberFactory) {
var self = this;
subscriberFactory.get({}, function(subscriberFactory) {
self.subscriberdata = subscriberFactory.user;
});
self.harish = false;
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="border-forpb" class="col-sm-12 panel panel-default" ng-app="subscribeWho">
<div class="panel-body" id="artle_panel_body" ng-controller="mysubscribeWho as omega">
<div ng-repeat="result in omega.subscriberdata">
<div ng-class="{div0f:result.subscribed==omega.harish,div0g:!result.subscribed==omega.harish}" id="mecota0f" ng-click="omega.harish=!result.subscribed">
</div>
</div>
</div>
You are changing outer scope omega.harish value which is common for all items in the ngRepeat. Instead create local scope copy of omega.harish with ngInit directive:
<div ng-repeat="result in omega.subscriberdata">
<div ng-class="{div0f:result.subscribed==harish,div0g:!result.subscribed==harish}" id="mecota0f"
ng-init="harish = omega.harish"
ng-click="harish=!result.subscribed">
</div>
</div>
Related
I have an ng-repeat that has an ng-if attached to it, with a child element that I am changing with an ng-click. The code looks something like the following:
<div ng-repeat="object in objects" ng-if="show">
<div ng-click="show = !show">Show</div>
</div>
Lets say I had 2 objects, it would load two repeated divs, and there would be two 'show' elements. When I click show, it will only remove one of the repeated elements from the page. I need it to remove both. Thoughts?
If you want to hide all I would wrap all of it in an outer div and place the "ng-if" there.
<div ng-if="show">
<div ng-repeat="object in object">
<div ng-click="show = !show">Show</div>
</div>
</div>
I would however advise to place any logic that modifies data in the TS file instead of in the html view.
Your template is almost correct, the only thing that is worth mentioning is that:
The scope created within ngIf inherits from its parent scope
using prototypal inheritance.
The main caveat of prototypal inheritance is that setting a primitive value on the child scope shadows the value on the parent scope. There are different approaches of how to avoid this, see the code snippet below:
angular.module('app', [])
.controller('mainController', function mainController($scope) {
var ctrl = this;
$scope.show = true;
$scope.showList = {value: true};
$scope.objects = [{}, {}, {}];
$scope.toggleShowVar = function(){
$scope.show = !$scope.show;
};
ctrl.show = true;
});
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<body ng-app="app">
<div class="container" ng-controller="mainController as $mainCtrl">
<p>This will not work due to scope prototypal inheritance:</p>
<div ng-if="show">
<div ng-repeat="object in objects">
<div ng-click="show = !show">Show {{show}}</div>
</div>
</div>
<p>Using "controller as" will help us:</p>
<div>
<div ng-repeat="object in objects" ng-if="$mainCtrl.show">
<div ng-click="$mainCtrl.show = !$mainCtrl.show">Show {{$mainCtrl.show}}</div>
</div>
</div>
<p>Or simply using "dot in the model":</p>
<div>
<div ng-repeat="object in objects" ng-if="showList.value">
<div ng-click="showList.value = !showList.value">Show {{showList.value}}</div>
</div>
</div>
<p>Or using controller method for toggle:</p>
<div>
<div ng-repeat="object in objects" ng-if="show">
<div ng-click="toggleShowVar()">Show {{show}}</div>
</div>
</div>
<p>Or using $parent to change it in the controller's scope:</p>
<div>
<div ng-repeat="object in objects" ng-if="$parent.show">
<div ng-click="$parent.$parent.show = !$parent.$parent.show ">Show {{$parent.show}}</div>
</div>
</div>
</div>
</body>
How to show or hide a div in a Html, related to a controller, using the variable from a directive.
To show or hide div in html use ng-show:
<div ng-show="myValue"></div>
when myValue is true div element will be visible ,if false then it will hide.
you have to declare that my value in controller that is true or false such as scope.myValue=true;
More details here: Angularjs ng-show
Now passing variable from directive to controller this will help Easiest way to pass an AngularJS scope variable from directive to controller?
In below code I have showed ng-show and ng-hide using both examples using HTML to handle and controller to handle.
In first ng-hide hide the dhaarani name. In controller used to show the dhaarani name using
$scope.hai = false;
inside timeout function
$timeout(countUp, 2000);
Try below code.
var showApp = angular.module('showApp', [])
.controller('mainController', function($scope,$timeout) {
// set the default value of our number
$scope.myNumber = 0;
// function to evaluate if a number is even
$scope.isEven = function(value) {
if (value % 2 == 0)
return true;
else
return false;
};
$scope.timeInMs = 0;
$scope.hai = true;
$scope.welcome = true;
var countUp = function() {
$scope.hai = false;
alert("sgf");
}
$timeout(countUp, 2000);
});
.profilename{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="showApp" ng-controller="mainController">
<div class="page-header text-center">
<h1>ngShow and ngHide: Functions</h1>
</div>
<!-- ANIMALS =========================================================== -->
<div class="row">
<div class="col-xs-4">
<form>
<div class="form-group">
<label>Type a Number</label>
<input type="text" class="form-control" ng-model="myNumber">
</div>
</form>
</div>
<div class="col-xs-8 jumbotron text-center">
<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
<h2>The number is even.</h2>
</div>
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
<h2>The number is odd.</h2>
</div>
</div>
</div>
<div class="page-header text-center">
<h1>ngShow and ngHide: using controller</h1>
</div>
<p ng-show="welcome">welcome</p>
<p ng-hide="hai" class="profilename">Dhaarani</p>
</div>
Please see this jsFiddle
Within this fiddle I have two html divs that contain Ad Placements. I want to toggle them on/off using Angular so on one instance Ad 1 will show and in another instance Ad 2 will show instead. Note that in each div I have Javascript content that I want to also toggle on/off.
I essentially want to update the View.
HTML:
<div ng-controller="MyCntrl">
<div id = "ad1" class = "ad1">
AD 1
<img src ="http://images.dailytech.com/frontpage/fp__Apple-100x100.png"></img>
<script><!-- code here --></</script>
</div>
<div id = "ad2" class = "ad2">
AD 2
<img src ="http://fixmypod.ca/image/cache/data/NEWEST_Phones/Samsung_Galaxy_Note_2-100x100.jpg"></img>
<script><!-- code here --></</script>
</div>
</div>
Angular:
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
$scope.changeView = function(ad){
//make ad x show and the other ad hidden
}
}]);
How can I go on doing this?
Simply use ng-show instead of a class and use a boolean property on your scope to trigger your divs.
HTML:
<div ng-controller="MyCntrl">
<div id="ad1" ng-show="toggle">
AD 1
<img src ="http://images.dailytech.com/frontpage/fp__Apple-100x100.png"></img>
<script><!-- code here --></</script>
</div>
<div id="ad2" ng-show="!toggle">
AD 2
<img src ="http://fixmypod.ca/image/cache/data/NEWEST_Phones/Samsung_Galaxy_Note_2-100x100.jpg"></img>
<script><!-- code here --></</script>
</div>
</div>
Angular:
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
$scope.toggle = true;
$scope.changeView = function(ad){
$scope.toggle = !$scope.toggle;
}
}]);
Alternatively, you can use ng-include to only render a template based on a property.
HTML:
<div ng-controller="MyCntrl">
<div ng-if="condition">
<div ng-include="`template/path/ad1`"></div>
</div>
<div ng-if="!condition">
<div ng-include="`template/path/ad2`"></div>
</div>
</div>
You can do it by
ngShow
ngHide
ngIf
controller
$scope.myDiv=true;
view
<div ng-show="myDiv">
if true this will visible
</div>
I have a simple object in a controller which can sometimes be empty ({}).
app.controller('TestController', function() {
var vm = this;
vm.testObject = {};
});
I want to hide or show some DOM-elements in the corresponding template when the object is empty or not.
I tried to do it with a simple <div ng-if="vm.testObject"> but when vm.testObject === {} it is considered true in the ng-if.
<div ng-controller="TestController as vm">
<div ng-if="vm.testObject">
Test Object is not empty
</div>
<div ng-if="!vm.testObject">
Test Object is empty
</div>
</div>
Is there a simple way to check for an empty object in the template? Preferably without adding new variables to the scope.
Here is a working Plunker:
http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview
You should use an AngularJs filter:
Javascript:
app.filter('isEmpty', [function() {
return function(object) {
return angular.equals({}, object);
}
}])
Html template:
<div ng-if="!(vm.testObject | isEmpty)">
Test Object is not empty
</div>
<div ng-if="vm.testObject | isEmpty">
Test Object is empty
</div>
Updated plunkr: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview
Are you ok with moving the equality check to the ng-if?
<div ng-controller="TestController as vm">
<div ng-if="!equals({}, vm.testObject)">
Test Object is not empty
</div>
<div ng-if="equals({}, vm.testObject)">
Test Object is empty
</div>
</div>
Otherwise, provide a helper on the scope
app.controller('TestController', function() {
var vm = this;
vm.testObject = {};
vm.empty = function() {
return vm.testObject === {};
};
});
then
<div ng-controller="TestController as vm">
<div ng-if="!vm.empty()">
Test Object is not empty
</div>
<div ng-if="vm.empty()">
Test Object is empty
</div>
</div>
This is an old thread but I find easier to check if the Object has keys.
<div ng-controller="TestController as vm">
<div ng-if="Object.keys(vm.testObject).length">
Test Object is not empty
</div>
<div ng-if="!Object.keys(vm.testObject).length">
Test Object is empty
</div>
</div>
It's simple and readable.
This will work. check the Length
<div ng-if="!!vm.testObject && vm.testObject.length > 0">
Test Object is not empty
</div>
You can convert the object to a JSON string using the built-in AngularJS json filter and do a comparison like this:
<div ng-if="vm.testObject | json) != '{}'">
Test Object is not empty
</div>
I am working on Angular app. I tried to use ng-if and switch inside ng-repeat but didn't succeed. I have data like:
**[{"_id":"52fb84fac6b93c152d8b4569",
"post_id":"52fb84fac6b93c152d8b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"hoot",},
{"_id":"52fb798cc6b93c74298b4568",
"post_id":"52fb798cc6b93c74298b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"story",},
{"_id":"52fb7977c6b93c5c2c8b456b",
"post_id":"52fb7977c6b93c5c2c8b456a",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"article",},**
$scope.comments = data mentioned above
and my Html like :
<div ng-repeat = "data in comments">
<div ng-if="hoot == data.type">
//differnt template with hoot data
</div>
<div ng-if="story == data.type">
//differnt template with story data
</div>
<div ng-if="article == data.type">
//differnt template with article data
</div>
</div>
How can I achieve this thing in Angular?
Try to surround strings (hoot, story, article) with quotes ':
<div ng-repeat = "data in comments">
<div ng-if="data.type == 'hoot' ">
//different template with hoot data
</div>
<div ng-if="data.type == 'story' ">
//different template with story data
</div>
<div ng-if="data.type == 'article' ">
//different template with article data
</div>
</div>
This one is noteworthy as well
<div ng-repeat="post in posts" ng-if="post.type=='article'">
<h1>{{post.title}}</h1>
</div>
I will suggest move all templates to separate files, and don't do spagetti inside repeat
take a look here:
html:
<div ng-repeat = "data in comments">
<div ng-include src="buildUrl(data.type)"></div>
</div>
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.comments = [
{"_id":"52fb84fac6b93c152d8b4569",
"post_id":"52fb84fac6b93c152d8b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"hoot"},
{"_id":"52fb798cc6b93c74298b4568",
"post_id":"52fb798cc6b93c74298b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"story"},
{"_id":"52fb7977c6b93c5c2c8b456b",
"post_id":"52fb7977c6b93c5c2c8b456a",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"article"}
];
$scope.buildUrl = function(type) {
return type + '.html';
}
});
http://plnkr.co/edit/HxnirSvMHNQ748M2WeRt?p=preview