在表中选择 ng-change

Posted 2023-05-09

【中文标题】在表中选择 ng-change

【英文标题】：select ng-change in table

【发布时间】：2018-04-19 00:12:27

【问题描述】：

我一直在寻找这个问题的答案，但找不到任何地方。

我有一个有选择和日期输入的表格

<table id="tblCorrAction" class="table table-bordered table-striped table-hover table-condensed">
    <thead>
        <tr style="height: 30px; background-color: #aeccea; color: #555; border: solid 1px #aeccea;">
            <th style="width:18%;">RArea</th>
            <th style="width:37%;">P</th>
            <th style="width:20%;">C</th>
            <th style="width:25%;">CAction</th>
         </tr>
     </thead>
     <tbody>
         <tr ng-repeat="ca in CASelectList">
             <td>ca.QT</td>
             <td>ca.CAPT</td>
             <td>
                 <select name="caC_ca.QuesID" ng-model="item" class="form-control" 
                     ng-selected="ca.Corrected" ng-required="true" 
                     ng-change="GetCorrectedCAData(ca, item)" 
                     ng-options="corr as corr.caText for corr in correctedOption">
                     <option value="">--Select--</option>
                 </select>                                               
             </td>
             <td>
                 <span>
                     <input name="caDate_ca.QuesID" type="text" datepicker="" 
                     ng-model="ca.caDate"/>
                </span>
            </td>
        </tr>
    </tbody>
</table>

In my controller

$scope.correctedOption = [ caValue: 1, caText: 'Yes' ,  caValue: 2, caText: 'No' ];

所以现在我要做的是，如果在选择选项中使用选择是，那么用户可以在日期时间输入中输入值，如果用户选择否，则应该重置输入的值。我尝试了一些东西，没有一个成功

第一：

$scope.GetCorrectedCAData = function (ca, item) 
    if (item.caValue === 2) 
        $scope.ca.caDate = ""
    


this did not work. Error : Cannot set property 'caDate' of undefined
at ChildScope.$scope.GetCorrectedCAData

2nd : 添加 id 到输入

<input id="caDate_ca.QuesID" name="caDate_ca.QuesID" type="text" datepicker="" 
                     ng-model="ca.caDate"/>
And in controller
if (item.caValue === 2) 
        angular.element(document.querySelector("#caDate_" + ca.QuesID)).val("");
    
this also did not work. Error:Missing instance data for this datepicker

3rd：循环遍历 CASelectList 拼接行并添加拼接的行，其中包含空数据作为日期。我不想使用它，因为可能有很多很多记录。

日期选择器指令

ngControlMod.directive('datepicker', function () 
    return 
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) 
            $(el).datepicker(
                onSelect: function (dateText) 
                    scope.$apply(function () 
                        ngModel.$setViewValue(dateText);
                    );
                
            );
        
    ;
);

【问题讨论】：

您能否在控制器中发布与问题相关的点。 $scope.ca 是什么？

CASelectList 使用 ng-repeat 填充表。 .请看上表。所以 input 和 select 可以被 ca.caDate 和 ca.Corrected 绑定。因此，当用户选择否作为答案时，我想使用 $scope.ca.caDate = "" 删除所选日期

【参考方案1】：

ng-repeat 中的ca 与控制器中的$scope.ca 中的ca 不同。当您执行$scope.ca 时，这意味着控制器上有一个名为ca 的$scope 变量。像这样，

var Controller = function($scope) 
    $scope.ca = 
        caDate: "some date";
    

您会得到Error : Cannot set property 'caDate' of undefined，因为$scope.ca 在$scope. 上不存在

如果您想在ng-repeat 中引用每个CASelectList 中的值（我认为您想要），那么您只需将$scope. 放在ca 前面。所以你的代码看起来像这样，

var Controller = function($scope) 
    $scope.GetCorrectedCAData = function (ca, item) 
        if (item.caValue === 2) 
            ca.caDate = ""; // This will change the ca value of the certain ca in CASelectList
        
    

【讨论】：

它不起作用。 caDate 不会重置。我用了这个 if(SelectCorrected.caValue === 2) $scope.ca = caDate: ""

不要改成$scope.ca = ...，把$scope.放在ca.caDate = "";之前就行了

哦，我的错。让我再试一次

感谢您的回答。我知道 ng-repeat 中的 ca 与控制器中 $scope.ca 中的 ca 不同。那么如何没有 $scope 有两种方式绑定。虽然我刚刚开始第一次使用 angular，但我的理解是，如果我必须更新视图中的任何内容，我需要 $scope

在您的示例中，您不是双向绑定。您只是调用方法GetCorrectedCAData 传递从ng-repeat 创建的对象ca。您只是更改传入的对象，恰好是CASelectList 中的对象。