angular-materialize
angular-materialize copied to clipboard
krescruz
Material select is not enabled on button click
I have a material select which binds the data using angular, on page load I disabled the Material select, on button click am enabling the material select.
Issue : Material Select is not enabled
<body ng-app="materializeApp" ng-controller="BodyController">
<main>
<div class="row container">
<div class="col s12 m12 l12">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Update Form</span>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="icon_prefix" type="text" class="validate" ng-model="data.firstname">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<input id="icon_telephone" type="text" class="validate" ng-model="data.lastname">
<label for="icon_telephone">Last Name</label>
</div>
<div class="input-field col s8">
<input id="email" type="email" class="validate" ng-model="data.email">
<label for="email" data-error="Wrong" data-success="Right">Email</label>
</div>
<div class="section col s4">
<div input-field>
<select ng-model="projects.value" material-select ng-disabled="checked">
<option ng-repeat="value in projects.choices">{{value}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="card-action white-text right-align">
<a class="waves-effect waves-light btn" ng-click="edit()"><i class="material-icons right">cloud</i>Edit</a>
</div>
</div>
</div>
</div>
</main>
<script>
var app = angular.module('materializeApp', ['ui.materialize'
.controller('BodyController', ["$scope", function ($scope) {
$scope.projects = {
value: "Select Value",
choices: ["p1", "p2", "p3", "p4"]
};
debugger;
$scope.checked = true;
$scope.edit = function () {
$scope.checked = false;
}
}]);
</script>
The material-select directive doesn't not watch the ng-disabled attribute. It is therefore never notified that the disabled status has changed.
For now, i would suggest having 2 selects, one that is always disabled, and one that is always enabled. Then show one of the two depending on the value of checked.
I'll mark this as an enhancement, since you want the material-select´ directive to watch for changes in ng-disabled`. This should be somewhat straight-forward, so pull-requests are welcome.
