How to clear values of dropdownlists in angularjs

Question

I am using ng-repeat in HTML to loop on a javascript array. showing this array in select. what i want to do is to clear all selected data from these dropdownlists when press on a button

HTML

<div class="widget-title">
                                <div class="widget-controls">
                                    <button class="btn btn-xs btn-primary" ng-click="newassignment()">New</button>
                                    <button class="btn btn-xs btn-success" ng-click="saveavd()">Save</button>
                                </div>
                                <h3><i class="icon-ok-sign"></i>Assignment</h3>
                            </div>
                            <div id="vacation" class="widget-content" style="height:81vh; overflow:auto;">
                                <div class="row">
                                    <table style="width: 70%;" border="1">
                                        <thead>
                                            <tr>
                                                <th>Departments</th>
                                                <th>Work Level</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="d in departments | filter : depts">
                                                <td>
                                                    <input style=" margin-top: 0;" type="checkbox"  ng-model="d.details"/> {{d.Dep_LDesc}}
                                                </td>

                                                <td>
                                                    <select class="form-control input-sm" ng-model="wrklevel2">
                                                        <option ng-repeat="w in worklevel" value="{{w.lvlid}}">{{w.lvlnm}}</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

angularjs

 $scope.worklevel = [
        { lvlid: 1, lvlnm: 'First Level' },
        { lvlid: 2, lvlnm: 'Second Level' }
    ]

$scope.newassignment = function () {


            $scope.wrklevel2 = {};


        angular.forEach($scope.departments, function (d) {
            d.details = false;
        })
    }

NTP · Accepted Answer · 2019-02-20 11:05:44Z

1

You should have different models for your selects inside your ng-repeat to achieve that you can try the following

(ng-model="d.wrklevel2")

<select class="form-control input-sm" ng-model="d.wrklevel2">
    <option ng-repeat="w in worklevel" value="{{w.lvlid}}">{{w.lvlnm}}</option>
</select>

after that you can also clear values of select inside your forEach loop

angular.forEach($scope.departments, function (d) {
    d.details = false;
    d.wrklevel2 = undefined;
})

answered Feb 20, 2019 at 11:05

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NTP Over a year ago

I'm glad I could help.

random · Accepted Answer · 2019-02-20 10:40:34Z

0

set the ngModel of select to empty string -

function saveavd()
{
  $scope.wrklevel2 = ""
  // ...
}

answered Feb 20, 2019 at 10:40

random

7,9093 gold badges21 silver badges25 bronze badges

3 Comments

hassanzi Over a year ago

i did it but still not working, and i added $scope.$apply(); , but still not working

random Over a year ago

Your controller name in <input style=" margin-top: 0;" type="checkbox" ng-model="d.details"/> is different and ngmodel name for <select class="form-control input-sm" ng-model="wrklevel2"> is different. The solution suggested by NTP is correct.

hassanzi Over a year ago

Thanks you very much

Collectives™ on Stack Overflow

How to clear values of dropdownlists in angularjs

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related