I am using Angular Material md-select with the multiple flag
<div layout="row"
<md-input-container class="md-block" flex-gt-sm>
<label>Pick State</label>
<md-select multiple flex ng-model="main.selectedData.State">
<md-option ng-repeat="(key, value) in main.State" value="{{value.value}}">
{{value.display}}
</md-option>
</md-select>
</md-input-container>
</div>
When I select my multiple options, everything works as expected on the controller end, but in the view my options stack vertically.
I would like to list them horizontally. So instead of:
AR,
CA
I would get:
AR, CA
I think the problem is that the rendered DOM comes out like this:
<md-select-value class="md-select-value" id="select_value_label_1">
<span>
<div class="md-container">
<div class="md-icon"></div>
</div>
<div class="md-text ng-binding">
AR
</div>
,
<div class="md-container">
<div class="md-icon"></div>
</div>
<div class="md-text ng-binding">
CA
</div>
</span>
<span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>
So if I try to add my own CSS to float: left or something like that, I get this:
I have reported this on Github as well, but I'm not sure they consider it a bug, so I am trying to find a work around short of rewriting or altering the module itself.
css:
._md-container{
display: inline-block;
}
http://codepen.io/nsuthar0914/pen/pbgxWo
Related
Problem with my approach is when the device width shrinks or switch my view to Mobile View, the chips are overflowing past the screen size. I wanted the chips to be aligned responsively with the screen size.
I tried implementing the div with flex but not luck.
Here's the code
<div layout="row">
<div layout="row">
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
</div>
I created a Code Pen to show the working example. Could anyone please review and let me know what I was doing wrong.
You were on the right track with adding flex, but you needed to tell it to wrap as well. On the second row, you can add the following css..
display:flex;
flex-wrap:wrap;
I know nothing about Angular Material, but just looking at the docs, it seems you can add the flex-wrap:wrap by adding layout-wrap to the container element
<div layout="row">
<div layout="row" layout-wrap>
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
So, I'm having the same issue present on this question
Bootstrap-UI Typeahead display more than one property in results list?
And, I already modified the plunker on the answer to my linking and needs
http://plnkr.co/edit/FdkvCUUD3ob7dt256Bgd?p=preview
But then, I realize they are using the 0.5 version of angular-ui, and angular 1.0.5
On my project, i'm using angular 1.4.9 and anguilar-ui 1.3.3 but somehow, my results are not showing or show as undefined
Controller
app.controller('testController', ['$scope', function ($scope) {
$scope.sites = JSON.parse("[{\"SITE_CODE\":\"CODE1\",\"SITE_NAME\":\"NAME1\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE2\",\"SITE_NAME\":\"NAME2\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE3\",\"SITE_NAME\":\"NAME3\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE4\",\"SITE_NAME\":\"NAME4\",\"ADDRESS\":\"\"}]");
}]);
HTML
<div class="row">
<div class="col-xs-4">
<div class="typeahead">
<input type="text" class="form-control" ng-model="test" uib-typeahead="site as site.SITE_CODE for site in sites"
typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
</div>
</div>
</div>
<div class="row" ng-show="noResults">
<div class="col-sm-6">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>
</div>
<script type="text/ng-template" id="siteList.html">
<div class="row">
<a tabindex="-1">
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_CODE | typeaheadHighlight:query"></span>
</div>
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_NAME | typeaheadHighlight:query"></span>
</div>
</a>
</div>
</script>
Any idea what am I missing?
Silly me, I just found out my issue
I was setting typeahead-popup-template-url instead of typeahead-template-url
After making this change, and adding ngSanitize to my module, everything went better than expected.
Now, I need to figure out a way to show the total of results, as I'll be only showing a fraction to the amount of results
I'm looking for the definition of table lists in Angular Material. Currently I've found the md-list directive, but it doesn't allow me to display the table on the whole screen (e.g. like in Bootstrap with the col-md-12 etc.)
Is there a possibility to implement it?
Example code:
<div layout="row" class="layout-align-center-center">
<md-list ng-cloak layout="column">
<md-list-item class="md-2-line" ng-repeat="item in todos">
<div class="md-list-item-text" layout="column">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
<md-divider></md-divider>
</md-list-item>
</md-list>
</div>
I'm not sure if this is the kind of thing you are looking for. But, you could try md-data-table.
There are others as well. This one seems to follow the Angular Material patterns pretty well.
I have the following:
<div class="row" ng-repeat="item in repo.items">
<div class="col-md-6 segment">
<div class="display-text animation editable">
<pre><span class="contenteditable"
tabindex="0"
contenteditable="true"
ng-model="item.text"></span></pre>
</div>
</div>
</div>
The 2-way binding isn't working for ng-model="item.text", but if I use the expression {{item.text}} within the same iteration it works as it should.
Any specific reason I'm missing which is causing this behavior?
ng-model used for input tag when you want to use only for view you should use ng-bind.
So you should use ng-bind="item.text" or {{item.text}} instead of ng-model="item.text" in span tag.
<pre>
<span class="contenteditable"
tabindex="0"
contenteditable="true"
ng-bind="item.text"></span>
</pre>
or
<pre>
<span class="contenteditable"
tabindex="0"
contenteditable="true">{{item.text}}</span>
</pre>
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.