javascript - 在按钮按下/事件触发器上传递选定的对象模型

Question

我有一个按钮，当前将所选值传递给 removeContract()。

<td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;">
    <button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue, contractIndex)">&nbsp;<=&nbsp;</button>
</td>
<td class="col-md-5" colspan="5">
    <label class="control-label">{{item.fields[132].displayName}}</label>
    <select size="5" ng-model="ctrl.selectValue">
        <option data-ng-repeat="contract in contracts">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
    </select> 
</td>     

但是，我需要发回实际的当前契约(Contract)模型，即上面的“契约(Contract)”。该函数的第一个参数必须是当前选择的合约。我该如何实现这一目标？

Answer 1

根据当前代码的一些建议:

• 无需将整个 {{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}] 传递到 ng-model 中，只需传递 contract.CONT_ORDNO 来标识从下拉列表中选择的数据。

  <option data-ng-repeat="contract in contracts" value="contract.CONT_ORDNO">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
  

• 由于我们在 Controller 内已经有了对象的contracts数组。因此，无需在removeContract函数内传递第二个参数。

  <button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue)">&nbsp;&lt;&#61;&nbsp;</button>
  

• 根据所选值，我们可以借助 Array 从 removeContract 函数内的 contracts 数组中删除 contract 对象filter()方法。

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.contracts = [
      {
        "CONT_ORDNO": "1",
        "SUPP_NAME": "alpha",
        "SUPP_NUM": "0001"
      },
      {
        "CONT_ORDNO": "2",
        "SUPP_NAME": "beta",
        "SUPP_NUM": "0002"
      },
      {
        "CONT_ORDNO": "3",
        "SUPP_NAME": "gaama",
        "SUPP_NUM": "0003"
      },
      {
        "CONT_ORDNO": "4",
        "SUPP_NAME": "xyz",
        "SUPP_NUM": "0004"
      }
    ];
    
    $scope.removeContract = function(selectedVal) {
      var removedObj = $scope.contracts.filter(function(item) {
        return item.CONT_ORDNO != selectedVal; 
      });
      console.log(removedObj);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;">
    <button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue)">&nbsp;&lt;&#61;&nbsp;</button>
</td>
<td class="col-md-5" colspan="5">
    <label class="control-label">{{item.fields[132].displayName}}</label>
    <select size="5" ng-model="ctrl.selectValue">
        <option data-ng-repeat="contract in contracts" value="{{contract.CONT_ORDNO}}">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
    </select> 
</td>   
</div>