javascript - 在表中选择 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

第二个:添加了 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

第三:循环遍历 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不一样 Controller 。当您执行 $scope.ca 时，这意味着 Controller 上有一个名为 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
        }
    }
}