如何传递由 ng-change 触发的 ng-repeat 创建的选项值和标签

Question

我正在使用 ng-repeat 创建选项，在 ng-change 上我想调用控制器函数并传递选项值和标签。我也尝试过使用 ng-options 创建选项，但陷入了 ng-repeat 过滤器的陷阱，没有帮助。

我可以将 ng-model 传递给函数，这会得到值，但不能同时得到值和标签。

这是我的代码，它代表了我想做的事情，但显然不起作用，因为 ng-change 函数调用在 ng-repeat 之外。

diskSizes = [ 
 {
   "label": "100GB",
   "value": 100
 },
 {
   "label": "250GB",
   "value": 250
 },
 {
   "label": "500GB",
   "value": 500
 },
 {
   "label": "1TB",
   "value": 1000
 },
 {
   "label": "1.5TB",
   "value": 1500
 }
]

HTML

<td > 
    <select ng-model="disk_size" ng-change="saveData(value,label)">
           <option ng-repeat="item in diskSizes" value={{item.value}}>{{item.label}}</option>
    </select>
</td>

Answer 1

通常使用 angularJS，HTML 仅反映数据结构，您可能应该在该数据结构中获取标签值。

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.diskSizes = [{
        "label": "100GB",
        "value": 100
      },
      {
        "label": "250GB",
        "value": 250
      },
      {
        "label": "500GB",
        "value": 500
      },
      {
        "label": "1TB",
        "value": 1000
      },
      {
        "label": "1.5TB",
        "value": 1500
      }
    ]

    $scope.saveData = function() {
      let val = $scope.disk_size;
      let lab = $scope.diskSizes.filter(f => f.value == val)[0].label;
      console.log(lab, val)
    }
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <select ng-model="disk_size" ng-change="saveData()">
    <option ng-repeat="item in diskSizes" value={{item.value}}>{{item.label}}</option>
  </select>


</div>

如何传递由 ng-change 触发的 ng-repeat 创建的选项值和标签

How to pass option value and label created with ng-repeat triggered by ng-change

angularjs

angularjs-ng-repeat