отключить текстовое поле в угловых JS, который находится под нг-повтор

0

Изображение 174551 Я работаю над angularjs и наткнулся на одну серьезную проблему, считаю, что я добавляю данные компании через html-форму, а затем я сделал положение о том, что Пользователь может добавить несколько владельцев для этой компании [потому что компания может иметь несколько владельцев в форме партнеров]. Теперь я дал текстовым полям заполнять информацию о владельцах компаний и вместе с тем, что предоставляется одна кнопка "добавить". При нажатии кнопки добавления один объект добавляется в companyOwnerList, а затем angularjs внутренне добавляет новую строку с данными в companyOwnerList (как я использовал ng-repeat). теперь проблема в том, что я хочу отключить все строки, которые добавлены пользователями, и предоставить им опцию "edit". Эта строка не отключается вообще. Я не могу найти логику, чтобы сделать это в angularjs. [В jQuery я мог бы сделать это удобно, но не смог реализовать его в angularjs]. Я хочу отключить строку, содержащую 'bobby' '[email protected]' (пожалуйста, обратитесь к изображению) Пожалуйста, помогите Спасибо.. Я предоставляю фрагмент кода, чтобы проблема была кристально чистым Jsp Page code следующим образом:

<tbody id="insertionRow" ng-init="edit=true">
        <tr>    
            <th>#</th>
            <th class="required">Name</th>
            <th>Email</th>
            <th>Phone No</th>
            <th>Add</th>
            <th>Delete</th>
    </tr>
    <tr data-ng-repeat="c in ctrl.client.clientOwnerVOList">
        <td>{{$index + 1}}</td>
        <td class="col-lg-3"><input type="Text" class="form-control"
            data-ng-model="c.clientOwnerName"
            id="clientOwnerName{{$index + 1}}" id="name">
        </td>

        <td class="col-lg-4"><input type="Email" class="form-control"
            data-ng-model="c.clientOwnerEmail"
            id="clientOwnerEmail{{$index + 1}}"></td>

        <td class="col-lg-3"><input type="Text" class="form-control" 
            data-ng-model="c.clientOwnerPhone"
            id="clientOwnerPhone{{$index + 1}}"></td>

        <td>
            <button id="add{{$index + 1}}" type="button"
                 data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)==0" data-ng-click="insert(c)"
                class="btn btn-sm btn-default">
                <i class="fa fa-plus fa-lg"></i>
            </button>
            <button id="edit{{$index + 1}}" type="button"
                data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
                class="btn btn-sm btn-default">
                <i class="fa fa-edit fa-lg"></i>
            </button >
            <button id="refresh{{$index + 1}}"  type="button" style="display:none"
                class="btn btn-sm btn-default">
                <i class="fa fa-refresh fa-lg"></i>
            </button>
        </td>

        <td><button type="button" data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
                ng-click="remove(c);" class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button>
            <button type="button" data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)==0"
                class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button>
        </td>

    </tr>
</tbody>

И код контроллера:

 $scope.insert=function(clientOwner){
    self.client.clientOwnerVOList.push({clientOwnerName:clientOwner.clientOwnerName,clientOwnerEmail:clientOwner.clientOwnerEmail,clientOwnerPhone:clientOwner.clientOwnerPhone});

                      clientOwner.clientOwnerName="";
                      clientOwner.clientOwnerEmail="";
                      clientOwner.clientOwnerPhone="";
    }
  • 0
    ты пробовал ng-disabled
  • 0
    Да, но я не могу решить это условие, так как я в основном работаю на стороне сервера, я не так хорошо знаком с html, DOM и всеми ...
Теги:

2 ответа

1
Лучший ответ

Вы можете попробовать это

<td class="col-lg-3"><input type="Text" class="form-control"
            data-ng-model="c.clientOwnerName"
            data-ng-disabled="IsDisabled(c)"
            id="clientOwnerName{{$index + 1}}" id="name">
        </td>

в контроллере

$scope.IsDisabled(c){
  return c.clientOwnerName == "Bobby"; //or other conditions
}

ОБНОВИТЬ

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

Html

        <td class="col-lg-3"><input type="Text" class="form-control"
            data-ng-model="c.clientOwnerName"
            data-ng-disabled="IsDisabled(c, $index)"
            id="clientOwnerName{{$index + 1}}" id="name">
        </td>

контроллер

$scope.disabledIndex = 1000; //some large number

$scope.IsDisabled(c, i){

  if( i > $scope.disabledIndex) return true;

  if(c.clientOwnerName == "Bobby")
    $scope.disabledIndex = i;

  return c.clientOwnerName == "Bobby"; //or other conditions
}
Поделиться
  • 0
    Я не просто хочу отключить строку, содержащую «bobby», а хочу отключить все последующие строки после пустой, можете ли вы предложить логику для этого.?
  • 0
    Хорошо, только одна вещь, чтобы спросить, что, если я хочу сделать это включенным при щелчке редактирования ... где я должен написать код и что это должно быть ..? Я имею в виду, Вы можете видеть на изображении, которое я загрузил выше, кнопка редактирования предоставляется с каждой строкой, я хочу включить ту конкретную строку, кнопка редактирования которой нажата
0

Используйте директиву ng-disabled для элементов, которые вы хотите условно включить/отключить.

ng-disabled="expression"

https://docs.angularjs.org/api/ng/directive/ngDisabled

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню