How to clear values of dropdownlists in angularjs

问题: 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 pres...

问题:

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;
        })
    }

回答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;
})

回答2:

set the ngModel of select to empty string -

function saveavd()
{
  $scope.wrklevel2 = ""
  // ...
}
  • 发表于 2019-02-21 13:08
  • 阅读 ( 157 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除