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.
Related
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
Today I upgraded angular-ui-bootstrap package from 1.3 to 2.0 and the it throws me the error below.
Error: [$compile:ctreq] Controller 'uibAccordionGroup', required by
directive 'uibAccordionHeading', can't be found!
http://errors.angularjs.org/1.5.7/$compile/ctreq?p0=uibAccordionGroup&p1=uibAccordionHeading
This the affected part of the code:
<div>
<uib-accordion>
<uib-accordion-group is-open="true">
<uib-accordion-heading>
{{vm.moduleMenu.name}}<i class="pull-right glyphicon"></i>
</uib-accordion-heading>
<div>... other content...</div>
</uib-accordion-group>
</uib-accordion>
</div>
What I did so far to solve this issue:
I checked whether the correct files are included -> fine
I checked the new source code whether the name of the directive has changed - it did not, it should work
I searched for uibAccordionGroup controller, I haven't found it...
I moved back the heading into uib-accordion-group tag - the error disappeared, but there is no style applied, just the heading text is displayed
I deleted the uib-accordion-heading, the result is the same as above, the content of the accordion is displayed but there is no style applied
Have anybody met this issue previously?
Libraries:
angular 1.5.7
angular-ui 2.0.0
Thanks,
You're getting this error because the syntax of angular ui bootstrap has changed slightly from version 1.3 to version 2.0.
Here's an excerpt from the accordion example on the website:
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</div>
<div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</div>
<div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</div>
<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
Hello
</div>
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
<div uib-accordion-group class="panel-danger" heading="Delete account">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</div>
<div uib-accordion-group class="panel-default" is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</div>
Notice that accordion-group is now an attribute, and not an element.
This should solve your problem.
In v2.0.0, uib-accordion-group is now an attribute not an element. You can see that in the repo here. Changing it to <div uib-accordion-group></div> should help resolve the error.
Since 2.0.0 the use of uibAccordion & uibAccordionGroup directive got restricted to A(attribute) only. See code here. They should get used as uib-accordion, uib-accordion-group as attribute directive & so on.
I'd say whenever you wanted to upgrade any of the library to its latest version, refer to their change logs on their github repo. By which you will no need to ask what going wrong with your current updated.
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>
I have a list in my ionic project with some icons that I want to click. But I cannot get the click to be picked up either by the htmll onclick() or by the AngularJS ng-click. My html looks like this:
<ion-view view-title="CUES - WATCH LIST">
<ion-content>
<div class="notification-message col-80" ng-hide="hideNotificationMessage" ng-click="hideNotificationMessage=true" ng-bind-html="messageContents"></div>
<ion-list>
<ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
<div class="watchlist-movie-thumb">
<img class="movie-thumb-image" src="{{watchlistitem.picture}}">
</div>
<div class="col-75 watchlist-title-genre-container">
<div class="watchlist-movie-title">
{{watchlistitem.title}}
</div>
<div class="watchlist-movie-genres">
{{watchlistitem.genres}}
</div>
</div>
<a class="item-icon-right" onclick="alert('you clicked me');" ng-click='remove_movie()'>
<i class="icon ion-trash-a" style="color:black;padding-top:40px"></i>
</a>
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="color:black;padding-bottom:40px;"></i>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The fact that even the onclick() doesn't pick up the click is very odd. I have tried changing the z index to 9999 but that has made no difference.
I stumbled across an answer by trying every html mod I could think of.
This is a bit of a bodge but works without compromising the layout.
I simply added a margin-right style to the tag as follows:
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="margin-right:-2px;color:black;padding-bottom:40px;" ng-click='remove_movie()'></i>
</a>
It doesn't seem to matter with respect to fixing the click problem what value I give the margin-right as long as it is there. It does though alter the layout as you would expect.
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.