在表格中选择ng-change

时间:2017-11-06 18:41:45

标签: javascript jquery angularjs asp.net-mvc

我一直在寻找答案,但找不到任何地方。

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

<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' }];

所以现在我要做的是如果use在select选项中选择yes,那么user可以在datetime输入中输入值,如果用户选择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

第3步:循环CASelectList,拼接该行并添加拼接行,其中包含日期的空数据。我不想使用它,因为可以有很多记录。

Datepicker指令

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

1 个答案:

答案 0 :(得分:1)

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

ca

您得到var Controller = function($scope) { $scope.ca = { caDate: "some date"; } } ,因为Error : Cannot set property 'caDate' of undefined上不存在$scope.ca

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

ca