Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

有什么建议吗？

Answer 1

我认为你误解了这个问题：你的外部ng-repeat意味着你有三个单独的选择框都试图使用相同的ng-model。（请注意，You selected: {{selectedCar}}永远不会看到任何值。）在这里，我将ng模型更改为数组，以便可以单独跟踪每个值;只需清空阵列就可以清除整个集合。

＆＃13;

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 = []
  }
});

＆＃13;

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

＆＃13;

Answer 2

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

如何清除ng-repeat

2 个答案: