Question

我有一个表，其中包含与列表项相对应的tr动态数。对于每一行，我希望有一个填充有预定代码的组合框，一个日期字段（无关）和一个管辖区（文本）字段。

根据组合框中选择的代码，我要禁用同一行的文本字段。

我尝试为每个项目“ jurisdictionDisabled”动态添加一个新属性，但是由于某种原因，它最终耦合了每一行的所有管辖范围字段（即：如果在第1行的组合框中选择的代码使管辖范围字段禁用，则第2,3，...行的管辖区也将被禁用）

edit_bulletin.xhtml

<fieldset>
    <legend>#{cjr_main.LegalRemedy} ({{bulletin.legalRemedies.length}})</legend>
    <!-- FR, NL, DE remarks-->
    <table>
        <tr>
            <th class="rf-dt-shdr-c">#{cjr_main.legalRemedyType}</th>
            <th class="rf-dt-shdr-c">#{cjr_main.legalRemedyDate}</th>
            <th class="rf-dt-shdr-c">#{cjr_main.legalRemedyJurisdiction}</th>
            <th class="rf-dt-shdr-c">#{cjr_main.legalRemedyRemark}</th>
            <th class="rf-dt-shdr-c"></th>
        </tr>
        <tr ng-repeat="legalRemedy in bulletin.legalRemedies track by $index">
                <td>
                    <select
                        ng-model="selectedLegalRemedyTypeCode" 
                        ng-options="legalRemedyType.code as getLegalRemedyTypeBasedOnLocale(legalRemedyType) for legalRemedyType in globalLegalRemedyTypes"
                        ng-change="updateLegalRemedyFields(selectedLegalRemedyTypeCode,$index)">
                    </select>
                </td>
                <td><input type="text" size="10" ng-model="legalRemedy.date" 
                    ui-mask="99/99/9999"/></td>
                <td><input type="text" size="10" 
                    ng-model="legalRemedy.jurisdiction" ng-disabled="currentLegalRemedy.jurisdictionDisabled"/></td>
                <td><input type="button" value="F N D [R]" ng-click="showLegalRemedyPopup(legalRemedy)" /></td>
                <td>
                    <a ng-click="removeLegalRemedy(legalRemedy, '#{cjr_main.confirmDeleteLegalRemedy}')">
                        <h:graphicImage value="#{UserInfoBean.imagesRelativePath}/delete.gif" alt="delete"/>
                    </a>
                </td>
        </tr>

    </table>
    <br></br>
        <input type="button" id="addLegalRemedyButton" ng-click="addLegalRemedy()" value="#{cjr_main.addLegalRemedy}"/>
</fieldset>

controller.js

/** legal remedies **/

$scope.addLegalRemedy = function(){
    $scope.bulletin.addLegalRemedy($scope.defaultLegalRemedy);
    $scope.currentLegalRemedy = {};
}

$scope.removeLegalRemedy = function (legalRemedy, confirmationMsg){
    confirmModal(confirmationMsg, function(){
        $scope.bulletin.removeLegalRemedy(legalRemedy);
        $scope.$apply();
    })
}

$scope.getLegalRemedyTypeBasedOnLocale = function(legalRemedy){
    if(currentLocale.indexOf('nl') !== -1){
        return legalRemedy.dutchDescription;
    } else if(currentLocale.indexOf('de') !== -1){
        return legalRemedy.germanDescription;
    } else{
        return legalRemedy.frenchDescription;
    }
}


$scope.updateLegalRemedyFields = function(selectedLegalRemedyTypeCode, currentLegalRemedyIndex){
    $scope.currentLegalRemedy = $scope.bulletin.legalRemedies[currentLegalRemedyIndex];

    // Should update date field aswell but the rules show that it's always displayed for providden codes
    switch(selectedLegalRemedyTypeCode){
        case "OPPOSITION" : 
            $scope.currentLegalRemedy.jurisdictionDisabled= true;
            break;
        case "APPEAL" : 
            $scope.currentLegalRemedy.jurisdictionDisabled = false;
            break;
        case "CONFIRMED BY" :
            $scope.currentLegalRemedy.jurisdictionDisabled = false;
            break;
        default :  $scope.currentLegalRemedy.jurisdictionDisabled = true;
    }
}

Answer 1

每个EACH select都需要一个变量，但是这里您只声明了1。将变量附加到每个legalRemedy上以仅保留该项目的选定值：

<select
  ng-model="legalRemedy.selectedLegalRemedyTypeCode" 
  ng-options="legalRemedyType.code as getLegalRemedyTypeBasedOnLocale(legalRemedyType) for legalRemedyType in globalLegalRemedyTypes"
  ng-change="updateLegalRemedyFields(legalRemedy)">
</select>

您还使它变得比需要的复杂一些。将当前项目传递给您的函数。该项目本身存储确定是否禁用输入的true / false值。您可以将legalRemedy变量视为该ng-repeat特定实例的整个范围：

<input type="text" size="10" 
  ng-model="legalRemedy.jurisdiction" 
  ng-disabled="legalRemedy.jurisdictionDisabled"/>

无需传递其他任何内容，因为您所需的所有内容都附加在商品本身上：

updateLegalRemedyFields(legalRemedy) {
  switch(legalRememdy.selectedLegalRemedyTypeCode) {
    case "OPPOSITION" : 
        legalRemedy.jurisdictionDisabled= true;
        break;
    case "APPEAL" : 
        legalRemedy.jurisdictionDisabled = false;
        break;
    case "CONFIRMED BY" :
        legalRemedy.jurisdictionDisabled = false;
        break;
    default :  legalRemedy.jurisdictionDisabled = true;
  }
}

如何根据ng-option值禁用组件

1 个答案: