I have a basic widget block:
<div class="matter ng-controller="ProductsCtrl">
<div class="container-fluid">
<div class="widget">
<div class="widget-head">
<div class="pull-left">Browse live products</div>
<div class="widget-icons pull-right">
<a class="wminimize" href="#" ng-click="showContent = !showContent"><i class="icon-chevron-up"></i></a>
</div>
<div class="clearfix"></div>
</div><!--widget-head-->
<div class="widget-content" ng-class="{ 'hidden': !showContent }">
<div class="padd">
<div>
{{content}}
</div>
</div>
<div class="widget-foot"></div>
</div><!--widget-content-->
</div><!--widget-->
</div>
</div>
And here is the empty controller:
appAdmin.controller("ProductsCtrl", function($scope){
});
I'm using ng-click to hide/show the content, but I am trying to default the content to be visible, and also try to swap the image for the icon chevron down whenever it's hidden. I am very new to Angular and am looking for some direction in adding models and things to make these simple features work.
Any help would be appreciated.
EDIT: Made default visible by switching ng-class="{ 'hidden' : !showContent }" to ng-class="{ 'hidden' : showContent }"
For the content to be visible by default, I would set $scope.showContent to true in the controller. You can use ng-class to change the chevron icon class based on the value of showContent in the following way: <i ng-class="{'icon-chevron-up': showContent, 'icon-chevron-down': !showContent}"></i>. Only the keys of the truthy values will be applied, so it will be either icon-chevron-up or icon-chevron-down. Let me know if I misunderstood your question!
Related
I am trying to add swipe functionality to a ng-repeated list of elements. However, the swiping works badly. Sometimes a swipe gestures (all on desktop) is recognized, but most of the times I'm click and swiping like a madman to achieve the expected result.
I am using Material Angular.
Code:
<div ng-repeat="link in Links | filter: { category: 'quick' }">
<div ng-show="!link.show" md-swipe-left="link.show = true">
<div class="lv-item ">
<span href="{{link.url}}" class="no-select" target="_blank" >
<div class="lv-title" class="no-select">{{link.title}}</div>
<small class="lv-small" class="no-select">{{link.description}}</small>
</span>
</div>
</div>
<div ng-show="link.show" md-swipe-right="link.show = false">
<div class="lv-item delete" >
<button ng-click="deleteLink(link.id)">Verwijder</button>
</div>
</div>
</div>
On the Angular Material swipe docpage (https://material.angularjs.org/latest/demo/swipe) it seems easy and it works like a charm. However my implementation of the directive doesn't seem to work as it should. It rather lets me select the text inside the element than swiping.
Also, I'd rather want the span to be a a href, but this only lets me drag the whole element out of space.
I believe that to assure a proper work of all material function you should use their containers and directives instead. So you should put all of that inside a md-content, and also use ng-ifs instead of ng-show on the swiped div. Which would result in something like that :
<md-content>
<div ng-repeat="link in Links | filter: { category: 'quick' }">
<div ng-if="!link.show" md-swipe-left="link.show = true">
<div class="lv-item ">
<span href="{{link.url}}" class="no-select" target="_blank" >
<div class="lv-title" class="no-select">{{link.title}}</div>
<small class="lv-small" class="no-select">{{link.description}}</small>
</span>
</div>
</div>
<div ng-if="link.show" md-swipe-right="link.show = false">
<div class="lv-item delete" >
<button ng-click="deleteLink(link.id)">Verwijder</button>
</div>
</div>
</div>
</md-content>
I used this kind of code snippet on some md-sidenav and it works. By the way, if you're using chrome and use mobile view, the md-swipe-left is always triggered, doesn't matter if you swipe left, right, top or bottom.
Hope this helps
<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">
<div>
<a class="navbar-brand" href="#">
<h1>ROCK 'N' GRILL<br>
<span>Pitampura New Delhi...</span></h1>
</a>
</div>
{{showSubHeader}}
<div ng-if="showSubHeader===true" class="topPull" draggable >
<button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
</div>
</div>
</div>
</ion-view>
The value of showSubHeader changes to false but yet I see the div in my view. How do I update view to not show the div when the value is false?
Edit:
This is veiw attached to an abstract state so I believe , the abstract state is not updated when views are switched. How do I reload header when views change or switch?
Instead of using ng-if you could use ng-show. So when showSubHeader is false, your div won't be shown. Have a look here: https://docs.angularjs.org/api/ng/directive/ngShow
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
I'm using the collapse feature of UI-Bootstrap (http://angular-ui.github.io/bootstrap/#/collapse) but when I use the collapse/toggle it loses the data and just returns "true".
Here is a Plunker to show my issue, http://plnkr.co/edit/e689Wureay8AMZQ9IIno?p=preview
A snippet from the code:
<div ng-repeat="name in names | filter:radioModel:true">
<span ng-model="namesList" ng-click="name = !name">Toggle collapse {{name.firstName}}</span>
<hr>
<div ng-show="name">
<div class="well well-large">{{name}} -</div>
</div>
That is because you are overwriting name in the ng-click here: ng-click="name = !name". That will make name true or false, depending on how many times ng-click was invoked.
What you want is to toggle a property on the model to collapse/uncollapse the following detail:
<div ng-repeat="name in names | filter:radioModel:true" >
<!-- change the property name.collapsed -->
<span ng-model="namesList" ng-click="name.collapsed = !name.collapsed">Toggle collapse {{name.firstName}}</span>
<hr>
<!-- use ng-hide to "collapse" -->
<div ng-hide="!!name.collapsed">
<div class="well well-large">{{name}} -</div>
</div>
</div>
Working demo: http://plnkr.co/edit/at7ceCYDXwWWlqUlKnkQ?p=preview
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.