在表中选择 ng-change

Question

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

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

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

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