Я работаю над 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="";
}
Вы можете попробовать это
<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
}
Используйте директиву ng-disabled для элементов, которые вы хотите условно включить/отключить.
ng-disabled="expression"
ng-disabled