Material select is not enabled on button click #213

saravanakumarputta · 2017-01-03T07:07:44Z

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>

webbiesdk · 2017-01-26T16:04:35Z

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.

webbiesdk added the enhancement label Jan 26, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material select is not enabled on button click #213

Material select is not enabled on button click #213

saravanakumarputta commented Jan 3, 2017 •

edited by webbiesdk

Loading

webbiesdk commented Jan 26, 2017

Material select is not enabled on button click #213

Material select is not enabled on button click #213

Comments

saravanakumarputta commented Jan 3, 2017 • edited by webbiesdk Loading

webbiesdk commented Jan 26, 2017

saravanakumarputta commented Jan 3, 2017 •

edited by webbiesdk

Loading