Converting ng-option to md-select. Angular material

Converting-ng-option-to-md-select.-Angular-material-.markdown

Converting ng-option to md-select. Angular material

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

Forked from Captain Anonymous's Pen Qwavpz.

A Pen by PSCoder on CodePen.

License.

index.html

<div ng-app="app" ng-controller="ctrl as c">
    <input ng-model="c.setVal" style="width:200px;" />
    <button ng-click="c.setOptionVal(c.setVal)">Set</button>
   
    <div>
       Select As syntax<br/>
        <custom-select options="item.id as item.name for item in c.items" ng-model="c.someVal" ng-change="c.changed(c.someVal)"></custom-select>
        <div>Selected:{{c.someVal}}</div>
    </div>
   
    <div>
       Select track by syntax<br/>
        <custom-select options="item.name for item in c.items track by item.id" ng-model="c.someVal2" ng-change="c.changed(c.someVal2)"></custom-select>


        <div>Selected:{{c.someVal2}}</div>
    </div>
    
    <div>
      Select regular syntax<br/>
        <custom-select options="item.name for item in c.items" ng-model="c.someVal3" ng-change="c.changed(c.someVal3)"></custom-select>


        <div>Selected:{{c.someVal3}}</div>
    </div>
</div>

script.js

angular.module('app', ['ionic', 'ngMaterial']).controller('ctrl', function($timeout) {
  $timeout((function(){
    this.items = [{
        id: 11,
        name: 'AAAAAAA AAAAAAAAAAAA'
    }, {
        id: 12,
        name: 'BBB'
    }, {
        id: 13,
        name: 'CCC'
    }, {
        id: 14,
        name: 'DDD'
    }, {
        id: 15,
        name: 'EEE'
    }, {
        id: 16,
        name: 'FFF'
    }, {
        id: 17,
        name: 'GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG'
    }];
     this.someVal3 = this.items[2];
  
  }).bind(this), 3000);
     this.someVal2 = {id:15}
     this.someVal = 13;
  
  this.changed = function(val){
    console.log("Updated", val);
  }
  this.setOptionVal = function(val){
    this.someVal = val;
    this.someVal2 = {id:val};
    this.someVal3 = this.items.filter(function(itm){return itm.id == val}).pop();
  }
}).directive('customSelect', function($parse, $timeout) {
    var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;

    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            ngChange:"&?"
        },
        template: '<md-select ng-model="ngModel" ng-change="ngChange()">\
           <md-select-label>{{getDisplayText()}}</md-select-label> \
       <md-option md-no-ink ng-repeat="item in items track by $index" ng-value="item.value" ng-click="selected(item)">{{item.text}}</md-option> \
    </md-select>',
        link: function(scope, elm, attrs, ctrl) {
            var match = attrs.options.match(NG_OPTIONS_REGEXP);

            var
                displayFn = $parse(match[2] || match[1]),
                valueName = match[4] || match[6],
                selectAs = / as /.test(match[0]) && match[1],
                selectAsFn = selectAs ? $parse(selectAs) : null,
                keyName = match[5],
                groupByFn = $parse(match[3] || ''),
                valueFn = $parse(match[2] ? match[1] : valueName),
                valuesFn = $parse(match[7]),
                track = match[8],
                trackFn = track ? $parse(match[8]) : null,
                trackKeysCache = {},
                //re-usable object to represent option's locals
                locals = {},
                displayField = _getNormalizedProp(match[2] || match[1]),
                idField = _getNormalizedProp(track || selectAs || valueName),
                trackField = _getNormalizedProp(track);
  
          var selectedItem;
          scope.$parent.$watchCollection(valuesFn, setCollection);
      
          scope.getDisplayText = function(){
            return (selectedItem || {}).text;
          }
          
          scope.selected = function(item){
              selectedItem = item;
          }
       
          ctrl.$render = function(){
            if(!angular.isArray(scope.items) || !ctrl.$viewValue) return;
            var viewValue = _getMatchedTrackValue(ctrl.$viewValue);
            
              for(var i=0, l= scope.items.length; i<l; i++){
                console.log(ctrl.$viewValue, trackField, viewValue,scope.items[i].value, _getMatchedTrackValue(scope.items[i].value))
                if(viewValue == _getMatchedTrackValue(scope.items[i].value)){
                  return selectedItem = scope.items[i];
                }
             }
          }
          
          function _getMatchedTrackValue(value){
             return trackField ? scope.$eval.call(value, trackField) : value;
          }
  
           function _getNormalizedProp(prop){
              if(!prop) return prop;
              return prop.split('.').slice(1).join('.');
           }
          
           function setCollection(values){
                if(values && angular.isArray(values)){
                  scope.items = values.map(function(it, i){
                     return {
                       text: callExpression(displayFn, i, it),
                       value: callExpression(selectAsFn || valueFn, i, it)
                     };
                  });
                }else if (values) {
                    // TODO: Implement for object if needed
                    scope.items = {};
                    for (var prop in values) {
                        if (values.hasOwnProperty(prop)) {
                            scope.items[prop] = callExpression(displayFn, prop, values[prop]);
                        }
                    }
                }
      
                ctrl.$render();
            }
  
            function callExpression(exprFn, key, value) {
                locals[valueName] = value;
                if (keyName) locals[keyName] = key;
                return exprFn(this, locals);
            }
        }
    }
}).config(function($provide){
  /*$provide.decorator('mdSelectDirective', ['$delegate','$timeout',function($delegate, $timeout){
    var origCompile = $delegate[0].compile;
    $delegate[0].compile = function(){
      var postLinkOrig = origCompile.apply(null, arguments);
      return function postLink(scope, elm, attr, ctrl){
        postLinkOrig.apply(null, arguments);
        var _origRender = ctrl[1].$render;
       
        ctrl[1].$render = function(){
          $timeout(_origRender);
        }
      }
    }
    return $delegate;
  }]);*/
});