4

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?

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
Toretto
  • 4,721
  • 5
  • 27
  • 46
  • Probably want to broadcast / emit event on routeScope, when each "row" hears the event, then it can trigger the clear function. – arodjabel Nov 20 '17 at 18:02
  • https://stackoverflow.com/questions/37717493/usage-of-broadcast-emit-and-on-in-angularjs – arodjabel Nov 20 '17 at 18:05

2 Answers2

3

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>
Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • Thanks a lot Daniel , it works well with ng-option as well. – Toretto Nov 20 '17 at 18:48
  • how to validate this with form if any field is equal to null? – Toretto Nov 21 '17 at 09:18
  • 1
    There are a number of different ways, depending how you're doing form validation in the rest of your app. It boils down to: iterate through that array and do something if you find a null value. I tweaked the above example to show a simple message for null values; if you need something more elaborate that's probably best posted as a new question. – Daniel Beck Nov 21 '17 at 12:10
0

<!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>
arodjabel
  • 420
  • 5
  • 14