Angularjs的ng-disabled会禁用我所有的按钮

Angularjs ng-disabled is disabling all of my buttons

本文关键字：按钮 ng-disabled Angularjs      更新时间：2023-09-26

我有一个在点击时调用的函数。一旦它被点击，我想禁用被点击的按钮。到目前为止，我所能做的就是让所有按钮禁用，当我点击只有一个。我试着放keys，但我运气不好。

这是我的html:

 <tr ng-repeat="parcel in parcels">
    <td><a ng-href="http://www.local.com/orders/{{ parcel.id }}/edit/">{{ parcel.id }}</a></td>
    <td>{{ parcel.tid }}</td>
    <td>{{ parcel.srfn }}</td> 
    <td><a  class="btn btn-success"  ng-disabled="isDisabled" ng-click="resolve({{parcel.id}})">Resolve</a></td>                                  
 </tr>

这是我的控制器:

 $scope.isDisabled = false;
 $scope.resolve = function(id)
   {
    $scope.order_id = id;
    $http({
        method: 'GET',
        url: '/outboundsummary/' + $scope.order_id, 
    })
    .success(function(data){
        console.log(data.dp);
        $window.alert("Resolved!");
        $scope.isDisabled = true;
        return false;
    });
 }

$scope.isDisabled在控制器中保留$scope变量的单一状态。由于您想要禁用ng-repeat中每个包裹的解析按钮的状态，您可以使用包裹对象来指示其状态，另外，您可以在resolve()函数中传递包裹变量来获得状态和id。当向ng-click回调函数传递角表达式时，不需要在{{}}中插入包裹id。

演示恰好

JAVASCRIPT

$scope.resolve = function(parcel)  {
    $http({
        method: 'GET',
        url: '/outboundsummary/' + parcel.id, 
    })
    .success(function(data){
      parcel.disabled = true;
    });
};


<tr ng-repeat="parcel in parcels">
  <td><a ng-href="http://www.local.com/orders/{{ parcel.id }}/edit/">{{ parcel.id }}</a></td>
  <td>{{parcel.id}}</td>
  <td>{{parcel.desc}}</td>
  <td>
    <a class="btn bnt-success" ng-disabled="parcel.disabled" ng-click="resolve(parcel)">Resolve</a>
  </td>
</tr>

更新:正如我们在聊天讨论中所讨论的，你的ng-click回调应该通过parcel而不是parcel.id - ng-click="resolve(parcel)"

此外，您的resolve()函数应该像这样:

$scope.resolve = function(parcel) { 
  $http({ 
    method: 'GET', 
    url: '/outboundsummary/' + parace.id, 
  }) 
  .success(function(data){ 
    parcel.disabled = true; 
  }); 
};

由于ng-repeat为每个元素创建了一个新的子作用域，我认为这很容易。试着

<td><a class="btn btn-success" ng-disabled="disabled" ng-click="[resolve(parcel.id), disabled=true]">Resolve</a></td>

您可以尝试这样做:

<a ng-disabled="isDisabled(parcel.id)" ng-click="resolve(parcel.id)">Resolve</a>

在你的控制器中:

var disabled = [];
$scope.isDisabled = function(id)
{
    if(disabled[id] === undefined) return false;
    return disabled[id];
}
$scope.resolve = function(id)
{
    disabled[id] = true;
  .....
}

我会尝试添加

{{包裹|json}}
以上或以下表，看看问题是否在ng-disable或在数据您发送到ng-repeat

相关文章：