Question

我有一个点击调用的函数。单击后，我想禁用单击的按钮。到目前为止，我所能做的就是在单击一个按钮时禁用所有按钮。我尝试了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;

    });
 }

Answer 1

$scope.isDisabled在控制器中保留$scope变量的单个状态。由于您要禁用ng-repeat中每个宗地的解析按钮的状态，您可以使用宗地对象来指示其状态，另外您可以在resolve()函数中传递宗地变量以获取状态和身份。将角度表达式传递给{{}}回调时，无需插入ng-click宗地ID。

<强> DEMO PLUNKER

<强> JAVASCRIPT

$scope.resolve = function(parcel)  {

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

<强> 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.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; 
  }); 
};

Answer 2

由于ng-repeat为每个元素创建了一个新的子范围，因此我认为这很容易。尝试

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

Answer 3

您可以尝试这样的事情：

<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;
  .....
}

Answer 4

我会尝试在表格上方或下方添加

{{parcels |json}}

以查看问题是否在ng-disable或您发送到ng-repeat的数据

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

4 个答案: