I need to Bind Array Items to UI.
back in Days i used bootstrap and now looking to use Angular Material.
In bootstrap and angular Binding the code as follows
<div class="row">
<div ng-repeat="product in products">
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
how to do the simalar grid binding using Angular Material. I tried below
<div layout="column">
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Resulting all items in rows. But i need the display to be similar to bootstrap view, showing items next to each other and in next rows
You will have to add "layout-wrap" attribute to your row.
<div layout="row" layout-wrap>
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Read more about layout options here
I am kind of new towards implementing rails with angular js.
What I want is I have a listing index page which gives me all the listings using
Listing.all
My page has several filters in it.Lets say I have a filter of gender, so what I needed is when that dropdown changes the page with listings in it should also get refreshed and now only show listings with the selected gender.
Here is what I have done:-
/application.js/
//= require jquery
//= require jquery_ujs
//= require semantic-ui
//= require dropzone
//= require cloudinary
//= require angular
//= require angular-resource
//= require app.js
//= require_tree ./angular
//= require_tree .
/ListingController(rails)/
def index
#listings=Listing.all
end
/index.html.erb/
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing.gender',class:'ui dropdown gender'})%>
<div class="ui divided items" ng-controller="ListingCtrl" ng-init="init( <%= #listings.to_json %> )" ng-repeat="listing in listings | filter:listing.gender">
<div class="item">
<div class="image">
<img src={{listing.photos.first.file_name.url}} class="header"/>
</div>
<div class="content">
<%=link_to '{{listing.title}}','{{listing}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
</span>
</div>
<div class="description">
<p>
<%='{{listing.love_for_pets}}'%>
</p>
</div>
<div class="extra">
<div class="ui teal tag label"><i class="rupee icon"></i><%='{{listing.price}}'%></div>
</div>
</div>
</div>
</div>
/angular/controllers/ListingController.js/
app.controller('ListingCtrl', ['$scope', '$resource', function($scope, $resource) {
$scope.init = (listings)
{
$scope.listings = angular.fromJson(listings)
}
}]);
/app.js/
var app = angular.module("PetForLife", ['ngResource'])
/Gemfile/
gem 'angularjs-rails'
The index page gets loaded but no listings are getting displayed,also no error on the console.
Can someone please help me with this?
So Finally after struggling and lot of google searches,I found the answer,so I am posting it here so that it can help someone.
Here are the changes required:-
<div class="ui page grid">
<div class="column">
<form class="ui form">
<div class="five fields">
<div class="field">
<label>Gender</label>
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing1.gender',class:'ui dropdown gender'})%>
</div>
<div class="field">
<label>Pet</label>
<%=select(:listing,:pet_type,options_for_select([['Dog','Dog',{class:'item'}],['Cat','Cat',{class:'item'}],['Bird','Bird',{class:'item'}]]),{prompt:'Pet'},{:'ng-model'=>'listing1.pet_type',class:'ui dropdown pet_type'})%>
</div>
<div class="field">
<label>Breed</label>
<%=select(:listing,:breed_type,options_for_select(Breed.all.collect{|x| [x.name,x.name,class:'item']}),{prompt:'Breed'},{:'ng-model'=>'listing1.breed_type',class:'ui search dropdown disabled breed_type'})%>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<!--div class="right floated field">
<label style="visibility:hidden;">Search</label>
<div class="ui left labeled icon button filter">
<i class="filter icon"></i>
Reset
</div>
</div-->
</div>
</form>
</div>
</div>
<div class="ui page grid tabmenu">
<div class="ui secondary pointing filter menu">
<!--a class="blue item" data-tab="saved">Saved</a-->
<a class="active green item" data-tab="all">All</a>
<a class="red item" data-tab="favorite">Favorite</a>
<a class="blue item" data-tab="user_listing">Your Listings</a>
</div>
</div>
<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%=#listings.to_json %>)" >
<div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender,'pet_type':listing1.pet_type,'breed_type':listing1.breed_type}:true">
<div class="image">
</div>
<div class="content listing_content">
<i class="right floated large like icon"></i>
<i class="right floated large star icon"></i>
<%=link_to '{{listing.title}}','{{listing.id}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
<%= #date = '{{listing.created_at}}' %>
</span>
</div>
<div class="description">
{{listing.love_for_pets}}
</div>
<div class="extra listing_price">
<div class="right floated ui circular facebook icon button">
<i class="facebook icon"></i>
</div>
<div class="right floated ui circular twitter icon button">
<i class="twitter icon"></i>
</div>
<div class="right floated ui circular google plus icon button">
<i class="google plus icon"></i>
</div>
<div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div>
</div>
</div>
</div>
</div>
The only change required was creating a separate div for initialisation and a different div for ng-repeat.
Rest all remains the same.
Hope it will help someone.
I am not familiar with rails, but it appears you are trying to pass data to the view through some kind of render engine. Instead, you need to have angular fetch the data with an ajax call (or you could use websockets) and then pass it to the view with angular. You will need to load angular on the page you are using by attaching the ng-app="PetForLife" to the body tag (or html tag)
<html ng-app="PetForLife">
You attach your controller with the ng-controller attribute on the first div tag (or the body tag).
<body ng-controller="ListingCtrl">
You should look at this article, which goes over some different (good and bad) ways to pass data to angular from Ruby:
Pass Rails Data to Angular
Check the 4th method there. You can use an angular service to get the rails data, and then inject that data wherever you need to in your angular app.
I am using bootstrap datetimepicker version 3. Here datetimepicker de-faulty taking current date and time. But in next version this problem is resolved. So I will try to use Eonasdan bootstrap datetimepicker version v4. For that what are the js and css files I have include in my jsp page?
Check manual installation guide here.
You must include:
jQuery
Moment.js
Bootstrap + collapse + transitions
So the files needed would be:
bootstrap.min.js
bootstrap.min.css
moment-with-locales.js
bootstrap-datetimepicker.css
bootstrap-datetimepicker.js
Check this fiddle for a working example.
HTML:
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
JS:
$('#datetimepicker1').datetimepicker();
I am learning Rails and I am using bootstrap-sass gem. My layout looks like this:
<main role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span3">
LEFT
</div>
<div class="span9">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div>
</main>
The problem is that each of the two columns, .span3 and .span 9 are shown full width and one beneath the other. This is the same for any .span combination.
What am I doing wrong?
Thanks!
You might be using bootstrap 2 syntax with bootstrap 3. span9 changed to col-md-9 (its not exactly like that, see getbootstrap.com for details on how the new grid works).
Which version of bootstrap are you using? If it's bootstrap version 3 it's switched to col-md-xx. So you probably need to use col-md-3 & col-md-9.
We just updated from jquery mobile beta 2 to rc2. We had a custom button that we don't want jqm to initialize (add extra markup) so we used this:
<button id="buttonid" data-role="none"></button>
And that worked perfectly, but now with the update it is actually initializing the button. I don't see any updates in the release notes or the documentation. Am I missing something?
Markup after update:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text"></span>
</span>
<button id="buttonid" data-role="none" class="ui-btn-hidden" aria-disabled="false"></button>
</div>
UPDATE
As Phill pointed out, my problem is hard to reproduce. Could be something with my code but it seems strange that simple changing version creates the behaviour for me. Here is additional markup that I first stripped out from example:
<ul class="item" data-role="listview" data-inset="true">
<li data-role="list-divider">Something</li>
<li>
<div class="block_container" data-role="none">
<div class="block block_small">
<button data-role="none" id="check-123" class="check" data-id="something"></button>
</div>
<div class="block block_small assignment">
<button data-role="none" id="assign-123" class="assignmentoverlay"></button>
</div>
<div class="block">
<h3>
Something
</h3>
<p>
lorem..
</p>
</div>
</div>
</li>
UPDATE 2
I found what the problem is. I am populating my list from javascript. At the end I'm calling trigger("create"). This will enhance all the elements in my list, even those with data-role="none.
jsfiddle to reproduce problem - http://jsfiddle.net/V2xAX/9/
Updating title of question
UPDATE 3
Hopefully the last update. We got it to work by doing the following:
When calling trigger("create")on my list, every element will be enhanced. We don't want this.
When calling trigger("create")on the page element holding the jquery mobile page, only elements without data-role="none"will be enhanced. This is the behavior we want.
Link for testing - http://jsfiddle.net/V2xAX/16/
It would be interesting to know why this happens :)