How to clear all selected option under ng-repeat

user_1242465 0
Viewed 517

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.cars = [{
      model: "Ford Mustang",
      color: "red"
    },
    {
      model: "Fiat 500",
      color: "white"
    },
    {
      model: "Volvo XC90",
      color: "black"
    }
  ];
  $scope.cl = function() {
    alert($scope.ename)
    $scope.selectedCar = ""
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <p>Select a car:</p>
  <div ng-repeat="y in cars">
    <select ng-model="selectedCar">
    <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
    </select>
  </div>
  <h1>You selected: {{selectedCar}}</h1>
  <button ng-click="cl()">click</button>
</div>

In above code due to ng-repeat every select box getting its own scope due to that when I try to clear all selected option I am not able to so.

Any suggestion?

angularjs-ng-repeat angularjs javascript
2 Answers

I think you've misdiagnosed the problem: your outer ng-repeat means you've got three separate select boxes all trying to use the same ng-model. (Note that the You selected: {{selectedCar}} never sees any of the values.) Here I've changed that ng-model to an array, so that each of the values can be tracked separately; the entire set can be cleared by simply emptying the array.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.selectedCar = [];
  
  $scope.cars = [{
      model: "Ford Mustang",
      color: "red"
    },
    {
      model: "Fiat 500",
      color: "white"
    },
    {
      model: "Volvo XC90",
      color: "black"
    }
  ];
  $scope.cl = function() {
    $scope.selectedCar = []
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <p>Select a car:</p>
  <div ng-repeat="y in cars">
    <select ng-model="selectedCar[$index]">
    <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
    </select>
    <span ng-if="!selectedCar[$index]">Choose a car</span>
  </div>
  <h1>You selected: {{selectedCar}}</h1>
  <button ng-click="cl()">click</button>
</div>

user_34123220 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <p>Select a car:</p>
    <div ng-repeat="y in cars">
      <select ng-model="selectedCar[$index]">
        <option ng-repeat="x in cars" value="{{x.model}}" >{{x.model}}</option>
      </select>
    </div>
    <h1>You selected: {{selectedCar}}</h1>
    <button ng-click="cl()">click</button>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $rootScope) {
      $scope.selectedCar = {};
      $scope.cars = [{
          model: "Ford Mustang",
          color: "red"
        },
        {
          model: "Fiat 500",
          color: "white"
        },
        {
          model: "Volvo XC90",
          color: "black"
        }
      ];

      $scope.cl = function(e) {
        $scope.selectedCar = {};
      };

    });
  </script>

</body>

user_26863130
Related