I'm running into a strange error but maybe I am using md-select incorrectly. I am trying to go to a new page or sign out based on the ng-selected option. Unfortunately, I am receiving this error:
Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
html:
<md-select placeholder="DISRUPTIVE" ng-model="activePage" ng-change="changeSelected()">
<md-option value="settings">Settings</md-option>
<md-option value="logout">Sign Out</md-option>
</md-select>
controller:
$scope.changeSelected = function(){
switch ($scope.activePage) {
case "settings":
$location.path( '/account');
break;
case "logout":
$scope.logout();
break;
}
};
After navigating to the selected page or logging out I receive the error. Can md-select not be used this way?
Edit: It's somehow related to leaving the page without letting md-select finish. If I add a $timeout it works. It's not ideal but at least I can move forward:
$scope.changeSelected = function(){
$timeout(function() {
switch ($scope.activePage) {
case "settings":
$location.path( '/account');
break;
case "logout":
Auth.logout();
break;
}
}, 1000);
To listen to changes on the select you just need to add an ng-change directive. Check this simple example
<div ng-app="selectDemoBasic" ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;">
<md-select placeholder="Pick" ng-model="someVal" ng-change="selectChanged()">
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
</div>
the js part
angular.module('selectDemoBasic', ['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.selectChanged = function(){
alert("value changed-->"+$scope.someVal);
if ($scope.someVal==1){
$scope.otherFunction();
}
};
$scope.otherFunction = function(){
alert("in the other function");
};
});
http://codepen.io/Eylen/pen/dobbqg/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With