We Keep Coding

Don't repeat button in ng-repeat

I'm using ng-show option in AngularJS.
<button ng-click="removeFilter();">
<span ng-repeat="cat in ctrl.getCategories()" ng-show="ctrl.filter[cat]" class="fa fa-close"></span></button>
This works very good but if I click second item, this div add another one but one button is enough for me.
How can I do that? Thanks.

Just place it outside
<button ng-click="removeFilter();"> </button>
<span ng-repeat="cat in ctrl.getCategories()" ng-show="ctrl.filter[cat]" class="fa fa-close"></span>

How to replace ionic footer elements' text contents?

I'd want to replace the text Check{{product.name}} to Check{{user}} if a condition is true.
I spent hours, tried hidden, display:none, .hide() etc. but none of them worked..
I also tried to create another <a> block for check{{user}} and hide the block if the condition is not true, but it does not work as well....
Wondering if someone could please help! Thanks.
There is my code:
html:
<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" >
check {{product.name}}
</ion-footer-bar>
js:
if (user_name !=''){
//change Check{{product.name}}" to "Check{{uesr}}"
};

Try this
<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" >
<a href="link" id="newtest">
<span ng-show="your_condition"> check {{product.name}} </span>
<span ng-show="!your_condition">Check{{uesr}}</span>
</a>
</ion-footer-bar>

If it is just text your replacing, then it is pretty easy.
$('ion-footer-bar > a').html('Check{{user}}');

It sounds like your problem is within your controller. When ion-footer-bar is outside the content, the scope is not shared with the footer. Make sure you wrap your html with a <div> and define a controller there before do a conditioning logic in your view.
<div ng-controller="mainCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Header</h1>
</ion-header-bar>
<ion-nav-view>
<ion-content>
Your content here
</ion-content>
</ion-nav-view>
<ion-footer-bar class="bar-positive">
<span ng-if="loggedUser!=user.id">
check {{product.name}}
</span>
<span ng-if="loggedUser==user.id">
Check{{user}}
</span>
</ion-footer-bar>
</div>

Adding to the first answer, you can also use
angular2 with *ngIf = (condition) inside of or to achieve the same results

ng-repeat repeats the div the directive is on

I have the following code:
<div ng-repeat="item in selectedCategory">
<div class="repertoire-composer">
<div data-toggle="collapse" data-target="#compositions{{$index}}"
class="repertoire-composer-title">
<span class="fa fa-chevron-right"></span>
{{item.composer}}
<span class="fa fa-plus"></span>
</div>
<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">
<div class="repertoire-composition">
{{composition}}
<span class="fa fa-remove" title="Remove"></span>
</div>
</div>
</div>
</div>
So what I basically want is to have a tree of multiple .repertoire-composer divs, each of which with one or many child .repertoire-composition inside its .repertoire-compositions div. So in the second repeat, angular should create one or more .repertoire-composition divs. However, what it seems to do is create more divs of the one the directive is on. Hope I've been explicit enough, here's the unwanted result:
So basically, why is my .repertoire-compositions div getting duplicated?
EDIT:
I was misunderstanding ng-repeat. This is the intended behaviour of it: to repeat the element the directive is on. Thanks for the clarification.

.repertoire-compositions is not being duplicated it's being actually ng-repeated by this part of your template:
<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">

I guess it's because of the second ng-repeat on item.compositions, can you provide a set of data ?

I'm not sure but you can try this in the inner repeater:
<div id="compositions{{$index}}" class="repertoire-compositions collapse">
<div class="repertoire-composition" ng-repeat="composition in item.compositions">
{{composition}}
<span class="fa fa-remove" title="Remove"></span>
</div>
</div>

Angular Js Tool Bar issue

I am having a toolbar directive using angular material, I am using a transclude at the end of the directive and I want the transcluded element to come at the right end of the banner. But what ever I do, it wont work, its coming after the elements of the directive?
The code for template is like below.
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<a ui-sref="#">Test - <span ng-bind="header.title"></span></a>
</h2>
<span flex="5"></span>
<div ng-transclude></div>
</div>
</md-toolbar>
Please find the example here. I wan to move Test123 to the right most end of the toolbar. Please help me

Try this as your banner.html:
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<a ui-sref="#">Test - <span ng-bind="header.title"></span></a>
</h2>
<span flex="5"></span>
<div ng-transclude style="position:absolute;right:0;top:16"></div>
</div>
</md-toolbar>
Not sure if this was what you were looking for but it does do what you asked.

You are in the right track.
In your banner.html you need to modify the <span flex="5"> to <span flex> this will make it expand all the way to the right instead of just 5 units and push everything inside the ng-transclude with it.
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<a ui-sref="#">Test - <span ng-bind="header.title"></span></a>
</h2>
<span flex></span>
<div ng-transclude></div>
</div>
</md-toolbar>
Also notice I cleaned up the index.html file so you can easily add content in between the banner tags.
<banner header-title="Title 1 Test">
<span>Test 123</span>
</banner>
You can see the full solution here
If you are interested, you can find more information about the md-toolbar directive in the official documentation.

Using Bootstrap, I can only get the text to act like a link, not the whole button?

I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>

remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.