because of different configurations I have to write the same autocomplete twice. The only difference is that one uses md-floating-label and the other placeholder. Is there a way to implement only one autocomplete, which decides to use the one or the other, because of an value?
I tried to implement a custom attribute directive. As result angular could not compile the template and crashed.
The following sample shows my current code:
<md-autocomplete
ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-min-length="0"
placeholder="Pick an Angular repository"
md-menu-class="autocomplete-custom-template"
ng-if="!ctrl.showAsLabel">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
<md-autocomplete
ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-min-length="0"
md-floating-label="Pick an Angular repository"
md-menu-class="autocomplete-custom-template"
ng-if="ctrl.showAsLabel">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
Related
I have a popover where i want all the content of my span tags to stay on the same line but allow linebreakes between span tags if needed.
But if i apply white-space: nowrap; on my span tags all my content is placed on one line and going outside the popover.
<button uib-popover-template="dynamicPopover.templateUrl" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span style="white-space: nowrap;">Word one, </span>
<span style="white-space: nowrap;">Word two, </span>
<span style="white-space: nowrap;">Word three, </span>
<span style="white-space: nowrap;">Word four, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
</div>
</script>
http://plnkr.co/edit/grWorND24x0Zo378hGxO?p=preview
You need spaces between the span tags otherwise it will treat it like 1 word.
A more maintainable solution is to use "display: inline-block;". It tries to keep text of each item on 1 line but only if it all fits on that line. It also breaks to the next line if it's going to overflow and takes up an entire line.
Also, I would suggest using css styles instead of inline styles since those are much more maintainable. If you don't want to make a stylesheet you can do something like this:
<style>
.popover-content span {
display: inline-block;
}
</style>
Iterating a foreach loop and trying to embed some string with razor, to achive this I tried code below;
<span class="label label-sm label-#item.isCorrect?#String.Format("success"):#String.Format("danger"))">
#item.CorrectAnswer
</span>
how it looks like in browser;
<span class="label label-sm label-class?success:danger)">
A
</span>
I just expected;
<span class="label label-sm label-success">
A
</span>
what should i do?
you were nearly there... just a missing bracket... i've put the below in one of my pages with my model and it works.
<span class="label label-sm label-#(item.isCorrect ? string.Format("success"):#String.Format("danger"))">
#item.CorrectAnswer
</span>
Hope that helps.
I am using Firebase in a pretty simple chat application. One of the features i'm working on now is the ability to update messages in the chat room, but only if you were the original author. For the editing i have an icon that, when clicked, will do some javascript to hide the message div and display a previously hidden div that has the update form in it. But i only want this to be available if you were the author of the message. Here's what the code looks like:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Right now, i can only get it to have updatable message for ALL message or no messages. Basically, the part i am stuck on is the check of whether or not the angularjs value of {{msg.author}} is equal to the rails value of <%= current_user.id %>. Any thoughts on how this can be achieved? Thanks for any help!
SOLVED:
Thanks to Jiten for the step in the right direction. I'm new to learning AngularJS and it's pretty complex. Sometimes you just need to know where to start.
I ended up using a combination of the ngIf directive and the angular.equals function. In my rails view i used ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" on anything i wanted available to authors of that message only. This will evaluate the response of isAuthor() and only render to the dom if it evaluates to true. The code above now looks like this:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Here is what isAuthor() looks like in my AngularJS controller:
$scope.isAuthor = function(msgAuthor, currentUser) {
return angular.equals(msgAuthor, currentUser);
}
Pretty simple really!
To compare two objects you can use:
angular.equals({{msg.authorId}}, <%= current_user.full_name %>)
This code:
<td>
<label>
<input type="checkbox">
</label>
</td>
yields this: , which is wide. I want only the check-box square part, like the check-boxes in this demo. Writing only <td><input type="checkbox"></td> creates simple check-box (not JQM style), since it's inside a table.
Does somebody has simple solution ?
first of all you will not be able to customize the by default developed HTML control. what I meant is just taking out the square portion from check box.
The link you share is doing it with the help of css classes and images.
Initially.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-on
ui-btn-up-c" data-theme="c" for="selectRow-2">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">
</span>
</span>
</label>
Later on when you click the square with help of java-script they have just swapped classes.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-off ui-btn-up-d"
data-theme="d" for="selectRow-1">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">
</span>
</span>
</label>
The easiest way would be using some thing similar in your layout and swapping the classes with JS.
On the Themeroller page, the author of jQuery UI shows that there are icons available if you use certain keywords. Example:
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-circle-close">
</span>
</li>
This creates a nice little X in the middle of a circle, framed by a box with rounded corners and a border.
But what if my icons are not in a list? What if they're in a table cell for instance?
<td>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</li>
</td>
This works, although it's not technically correct, because I don't have an opening and closing < ul> element.
Do I use
<td class="showcities">
<span class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s">
</span>
</span>
</td>
If so, what should the css be to define the ui-corner-all the same as the Themeroller example?
Instead of span, use <div> here, like this
<td class="showcities">
<div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</td>