使用ngOptions和selectpickerintable重置下拉默认值

时间:2017-03-30 10:24:53

标签: javascript angularjs

控制器: -

var selecteduser = [];
$scope.dataList = [
{ id:1, fname: 'abc', lname: 'xyz' },
{ id:2, fname: 'xyz', lname: 'abc' },
{ id:3, fname: 'foo', lname: 'bar' }
]; 
$scope.addUser = function (user) {
   selecteduser.push(user); 
$scope.selectedItem = '';
} 

HTML: -

<select class="dropdown" ng-model="selectedItem" 
ng-options =" data as data.fname +''+ data.lname for data in dataList" 
ng-change="addUser(selectedItem)">
</select>'

这里我按下数组中的值后重置下拉值。但它不起作用$ scope.selectedItem =&#39;&#39; ;.我错过了什么?请帮帮我!

谢谢

2 个答案:

答案 0 :(得分:1)

将selectedItem设置为null:

$scope.adduser = function (user) {
   if(user != null) 
        {
           selecteduser.push(user); 
           $scope.selectedItem = null;
        }
}

你走了:

var itemApp = angular.module("ItemApp", []);
itemApp.controller("ItemCtrl", function($scope){
     $scope.selecteduser = [];
     $scope.dataList = [
          { id:1, fname: 'abc', lname: 'xyz' },
          { id:2, fname: 'xyz', lname: 'abc' },
          { id:3, fname: 'foo', lname: 'bar' }
     ]; 
     $scope.addUser = function (user) {
        $scope.selecteduser.push(user); 
        $scope.selectedItem = '';
     } 

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-ng-app="ItemApp" data-ng-controller="ItemCtrl">

<select class="dropdown" ng-model="selectedItem" 
ng-options =" data as data.fname +''+ data.lname for data in dataList" 
ng-change="addUser(selectedItem)">
</select>

<hr />
Selected Users so far:
{{ selecteduser | json }}

</div>

答案 1 :(得分:0)

更改

ng-change="addUser(selectedItem)">

ng-change="adduser(selectedItem)">