javascript - is it possible to integrate <md-select> with <md-icon>? -

-

right using google material design angularjs.

i want have icons ilustrating each of options , in selection worked fine after select option instead of having icon images/svg+xml instead. (the picture explains situation better words)

enter image description here

the html have directive this:

<div layout="column">    <div layout="row" layout-sm="column" layout-align="space-around center">      <md-content md-theme="docs-dark" class="md-padding" flex>        <div layout="column" flex>              <div layout layout-sm="column" flex>            <md-input-container flex>                <label>name</label>                <input required type="text" name="name" ng-model="geo.geodef.name">                <div ng-messages="geodefform.name.$error">                <div ng-message="required">required.</div>              </div>            </md-input-container>          </div>        </div>      </md-content>    </div>        <md-content class="md-padding">      <div layout="row" layout-align="space-between center">        <div layout="column" style="margin-right:20px">            <p>start point</p>          <div layout layout-sm="column" style=" width:150px;">            <md-input-container flex>              <label>x</label>              <input required type="number" step="any" name="startpointx" ng-model="geo.geodef.geometrydefinition.startpoint.x">              <div ng-messages="geodefform.startpointx.$error">                <div ng-message="required">required.</div>                <div ng-message="number">required.</div>              </div>            </md-input-container>            <md-input-container flex>              <label>z</label>              <input required type="number" step="any" name="startpointz" ng-model="geo.geodef.geometrydefinition.startpoint.z">              <div ng-messages="geodefform.startpointz.$error">                <div ng-message="required">required.</div>                <div ng-message="number">required.</div>              </div>            </md-input-container>          </div>        </div>          <div style="margin: 20px 8px 0px 8px;">          <md-checkbox ng-model="geo.geodef.geometrydefinition.materialonrightside" aria-label="materialonrightside">            material on right side          </md-checkbox>        </div>      </div>          <div layout="row">        <div layout="column">          <p>approach definition</p>          <div layout="row" layout-align="space-around end">            <md-input-container style="width:100px;">              <label>length</label>              <input required type="number" step="any" name="approachlength" ng-model="geo.geodef.geometrydefinition.approachdefinition.length">              <div ng-messages="geodefform.approachlength.$error">                <div ng-message="required">required.</div>                <div ng-message="number">required</div>              </div>            </md-input-container>            <md-select style=" min-width:142px;" placeholder="commandtype" ng-model="geo.geodef.geometrydefinition.approachdefinition.transitionstrategy">              <md-option value="zpositive"><md-icon md-svg-src="img/approach_horizontal.svg"></md-icon>horizontal</md-option>              <md-option value="xpositive"><md-icon md-svg-src="img/approach_vertical.svg"></md-icon>vertical</md-option>              <md-option value="tangential"><md-icon md-svg-src="img/approach_tangential.svg"></md-icon>tangential</md-option>              <md-option value="perpendicular"><md-icon md-svg-src="img/approach_perpendicular.svg"></md-icon>perpendicular</md-option>    <!--not yet implemented-->              <!--<md-option value="tangentialround">tangentialround</md-option>-->            </md-select>          </div>            </div>                <div layout="column">          <p>departure definition</p>          <div layout="row" layout-align="space-around end">            <md-input-container style="width:100px;">              <label>length</label>              <input required type="number" step="any" name="departurelength" ng-model="geo.geodef.geometrydefinition.departuredefinition.length">              <div ng-messages="geodefform.departurelength.$error">                <div ng-message="required">required.</div>                <div ng-message="number">required</div>              </div>            </md-input-container>            <md-select style=" min-width:142px;" placeholder="commandtype" ng-model="geo.geodef.geometrydefinition.departuredefinition.transitionstrategy">              <md-option value="zpositive"><md-icon md-svg-src="img/departure_horizontal.svg"></md-icon>horizontal</md-option>              <md-option value="xpositive"><md-icon md-svg-src="img/departure_vertical.svg"></md-icon>vertical</md-option>              <md-option value="tangential"><md-icon md-svg-src="img/departure_tangential.svg"></md-icon>tangential</md-option>              <md-option value="perpendicular"><md-icon md-svg-src="img/departure_perpendicular.svg"></md-icon>perpendicular</md-option>    <!--not yet implemented-->              <!--<md-option value="tangentialround">tangentialround</md-option>-->            </md-select>          </div>            </div>      </div>        </md-content>   </div>

i've noticed image/svg+xml located inside tag. thinking 1 solution might way search text exact match , replace null somehow angular's filters.

the solution found solve problem use <img ng-src="{{geo.departure_horizontal}}" /> instead of <md-icon>. worked wanted!


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more