Как отключить компонент в зависимости от значения параметра ng

Question

У меня есть таблица, содержащая динамическое число tr, соответствующее элементам списка. Для каждой строки требуется заполнить поле со списком заранее определенных кодов, поле даты (не имеет значения) и поле юрисдикции (текст).

В зависимости от кода, выбранного в выпадающем списке, я хочу отключить текстовое поле той же строки.

Я пытался динамически добавить новое свойство для каждого элемента «июня», но по какой-то причине оно в итоге связало все поля юрисдикции для каждой строки (т. Е. Если код, выбранный в выпадающем списке строки 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

Вам нужна переменная для КАЖДОГО 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;
  }
}