#angular-material

Angular-Material still has Flex-Layout

After having nearly panicked when coming to the realization that there wouldn’t be support for the usual Layout mechanisms from previous versions, fortunately I came across the following library: https://github.com/angular/flex-layout

So now we have all the lovely layout mechanisms we have come to like so much from previous Angular versions still available in the latest version.

Situation: Advanced Angular-Material Form with multiple elements, each having radio groups (basic but complete setup)

Setup: Angular, Angular-Material, “md-radio-group”, “controller as”

Output: console.log selected radio options

Get after it:

HTML

<form name="myForm" ng-controller="DataController as data" ng-submit="submit(data)" novalidate ng-cloak>    <table>        <thead>            <tr>                <th rowspan="2">SOLUTIONS</th>                <th colspan="3">EVALUATIONS PLANNED</th>            </tr>            <tr>                <th>CONDUCTING RESEARCH</th>                <th>PLAN FIRST-TIME IMPLEMENTATION</th>                <th>PLAN TO REPLACE EXISTING SOLUTION</th>            </tr>        </thead>        <tbody ng-repeat="data in data.solutions">            <tr>                <td colspan="4">{{data.name}}</td>            </tr>            <tr ng-repeat="item in data.solutions">                <td>{{ item.product }}</td>                <td colspan="3">                    <md-radio-group ng-model="value" ng-change="onChangeNeed(value)">                        <md-radio-button value="{{ item.product }} Conducting" aria-label="{{ item.product }} Conducting">Conducting</md-radio-button>                        <md-radio-button value="{{ item.product }} Planning" aria-label="{{ item.product }} Planning">Planning</md-radio-button>                        <md-radio-button value="{{ item.product }} Replacing" aria-label="{{ item.product }} Replacing">Replacing</md-radio-button>                    </md-radio-group>                </td>            </tr>        </tbody>    </table> </form>

JS – Controller

$scope.onChangeNeed = function(value) {   console.log(value); };

JSON DATA (Example – in controller for example)

var vm = this; 

첫번째로 부딪히는 문제는 뭘 어디서 다운로드 해야 되느냐 여기서! https://github.com/silverprize/bower-material

두번째로 부딕히는 문제는 js, css를 뭘 넣어야 되느냐 위 링크에서 샘플이 있다!