|
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; |
|
}]);*/ |
|
}); |
