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
Related
I believe there is an answer to my question. I do exactly like some solution I found, but still I can't set default value to my dropdown. Here is my code.
<td>
<div ng-controller="daftarGroup" class="ui fluid multiple selection dropdown">
<input name="group" value="admin" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Group</div>
<div class="menu">
<div ng-repeat="y in groups" class="item" data-value="{{ y.gid }}">
{{ y.gid }}
</div>
</div>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
</div>
</td>
My dropdown will have a list of group, one of the item is "admin". The data is presented using Angular. Everytime I load the page, I want the dropdown show "admin" as default value. On another fiddle, it run perfectly, but not in my machine. Every time I refresh the page, no value set on my dropdown, but the list of group is accessible. Any idea about my case?
Thanks.
You can use data-ng-options and ng-init with ng-model to have a default value.
HTML:
<select
ng-init="group = groups[0]"
ng-model="group"
data-ng-options="y.gid for y in groups">
</select>
Angular controller:
$scope.groups = [
{gid: 1},
{gid: 2}
];
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 trying to filter an user list. I'm using a custom Bootstrap version and want to display a 4 columns table.
So far, I've the following code:
<div ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
<span ng-switch on="$index % 4">
<span ng-switch-when="0">
<div class="row-fluid">
<div class="span3" ng-if="users[$index+0]">
<user-item ng-model="users[$index+0]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+1]">
<user-item ng-model="users[$index+1]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+2]">
<user-item ng-model="users[$index+2]" on-click="showUser(userId)"></user-item>
</div>
<div class="span3" ng-if="users[$index+3]">
<user-item ng-model="users[$index+3]" on-click="showUser(userId)"></user-item>
</div>
</div>
</span>
</span>
</div>
So far, it works perfectly when there is no filter set.
When I set a searchValue, the $index cannot display the correct value (It will always start from 0 to the lengh of the filtered array).
My question is: Is there a way to correctly display the results in a 4-cols table and to filter the result ?
I don't think you need to add conditions in order to create a 4 column table using bootstrap css, simply use ng-repeat in a col-* element or using your custom span class (which I assume is created using bootstrap's mixins to create rows and columns).
DEMO
HTML
<input ng-model="searchValue.username" />
<div class="row-fluid">
<!-- simply change col-xs-3 to span3 -->
<div class="col-xs-3" ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
{{user.username}}
<user-item ng-model="user" on-click="showUser(user.id)"></user-item>
</div>
</div>
If the markup above does not work in your case because of the custom bootstrap that you're using, then you are probably better off with a filter that partitions your current array into sections of subarrays that represents a row-column relationship, answered by m59 in this SO Answer.
Next time try to give a shot to ngTasty table http://zizzamia.com/ng-tasty/directive/table it's based to bootstrap css table :)
I've got the following markup:
<li ng-repeat="month in months">
<!-- NOTE THAT THIS IS WORKING IN ALL BROWSERS -->
<div class="cm-month-grid" ng-style="{width:{{month.pos.width}}+'px', left:{{month.pos.left}}+'px'}">
<div class="cm-month-title" title="{{month.date.format('DD.MM.YY')}} {{month.pos | json}}">{{month.date.format('MMM.YY')}}</div>
<div class="cm-month-border"></div>
</div>
</li>
that runs fine, but this is not:
<li ng-repeat="unit in units | filter: filter.text">
<div class="cm-periods">
<!-- BUT THIS IS NOT WORKING... WHY....
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}">jalla</div>
</div>-->
<!-- WORKING IN CHROME ONLY -->
<div ng-repeat="period in unit.periods" class="cm-period" style="width:{{period.pos.width}}px; left:{{period.pos.left}}px;" data-period="{{.}}}">
<span>{{period.start.format('DD.MM.YY')}}</span>
</div>
<!-- -->
</div>
</li>
Full example could be seen here: http://plnkr.co/edit/aZsZEM?p=preview
I know there are issues with style and IE, that's why I'm using the ngStyle, but it does not update it style (try clicking on the zoom in the full example in IE)
Thanks for any help
Larsi
You are using ng-style with double curly brackets. As far as I know that's not valid in an expression.
Try this:
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}">jalla</div>
</div>
</div>
Hmm, still looks messy to me. But, HEY! it zooms! (in FF)
Uh, forgot: Forked Plunk
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!