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.
Related
Is there anyway to use excel or googlesheets to extract each <img src="......." to a separate column, if I have a column full of individual snipets of HTML such as this?
<li class="thumbs is-selected slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide10" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02409281_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02409281_0.jpg" alt=" ">
</span>
</span>
</li><li class="thumbs slick-slide" data-slick-index="1" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide11" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02557182_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02557182_0.jpg" alt=" ">
</span>
</span>
</li><li class="thumbs slick-slide" data-slick-index="2" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide12" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02554585_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02554585_0.jpg" alt=" ">
</span>
</span>
</li><li class="thumbs slick-slide" data-slick-index="3" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide13" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02600108_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02600108_0.jpg" alt=" ">
</span>
</span>
</li>
Try using this formula B2 of the demo sheet
=ARRAYFORMULA(IFERROR(REGEXEXTRACT(SPLIT(SUBSTITUTE(A3:A, "<img src=", "♥️<img src="), "♥️"),"img src=""(.*?jpg)"), ""))
A slight issue will be the that first column will be empty but I am guessing you are more interested in extracting all the images.
I'm not positive, but I think that this formula in B3 does what you want.
=ArrayFormula(REGEXTRACT(A3:A,"img src=""(.*?jpg)"))
Here is aa sample sheet:
https://docs.google.com/spreadsheets/d/1tAFGvTZwRL6al3ixM0eOEY5v03kUGgWkscVY8lOij2E/edit?usp=sharing
In the future, please make your sample sheet editable by everyone, to make it easier for people to help. Thanks.
If this doesn't do what you need, please clarify your question. And if it does do what you need, please select it as a valid answer, to help others.
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>
Using Capybara, I'm trying to test that the first contains "Shop".
The code looks like this:
<h1 aria-haspopup='true' class='dropdown-toggle title' data-toggle='dropdown' tabIndex='0'>
Dashboard
<span class='caret'></span>
</h1>
<ul aria-label='Dashboard Menu' class='dropdown-menu' role='menu'>
<li class='dropdown-header' role='presentation'>Recent Projects</li>
<li role='menuitem'>
<a href="/tkim/shop"><span class='recent-project-access-icon'>
<i class="fa fa-lock"></i>
</span>
<span class='str-truncated'>
<span class='namespace-name'>
tkim33
/
</span>
<span class='project-name filter-title'>
Shop
</span>
</span>
</a></li>
<li role='menuitem'>
<a href="/tkim/asdfadfsdsafdasf"><span class='recent-project-access-icon'>
<i class="fa fa-lock"></i>
</span>
<span class='str-truncated'>
<span class='namespace-name'>
tkim33
/
</span>
<span class='project-name filter-title'>
asdfadfsdsafdasf
</span>
</span>
</a></li>
<li role='menuitem'>
But I don't know how to assert whether the first contains "Shop".
I started out with:
find(:css, '.navbar-gitlab .dashboard-menu .dropdown-menu'), but I don't know how to traverse to make sure that the first li element contains my expected result.
Anyone know how to do this?
Can you try something like this:
page.all('li')[0].text.should == 'Shop'
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 %>)
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>