如何清除 ng-repeat 下的所有选定选项

Question

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>

在上面的代码中，由于 ng-repeat 每个 select 框都有自己的范围，因此当我尝试清除所有 selected 选项时，我无法这样做。

有什么建议吗？

Answer 1

<!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>

Answer 2

我认为你误诊了问题：你的外部 ng-repeat 意味着你有三个独立的 select 盒子都试图使用相同的 ng-model。（请注意，You selected: {{selectedCar}} 永远不会看到任何值。）在这里，我已将该 ng-model 更改为一个数组，以便可以单独跟踪每个值；只需清空数组即可清除整个集合。

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>

如何清除 ng-repeat 下的所有选定选项

How to clear all selected option under ng-repeat

javascript

angularjs

angularjs-ng-repeat