從父範圍數組中刪除項目

我想在用戶單擊刪除按鈕後從我的控制器中定義的json數組中刪除項目。該按鈕位於指令的html模板內。從父範圍數組中刪除項目

這裏是我的控制器

listVMS.controller('vmInfoController', ['$scope', function($scope) { 
    var json = [{ 
      image: 'img/fedora.png', 
      status: 'running', 
      name: 'Fedora', 
      ip: '192.168.3.354', 
      cores: '5', 
      ram: '2GB', 
      storage: '20GB' 
      }]; 
    $scope.vms = json; 

    $scope.removeVM = function() { 
    alert("Hello, World"); 
    }; 
}]);

我的指令

listVMS.directive('vmInfo', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     info: '=', 
     rmv: '&', 
    }, 
    templateUrl: 'views/vmInfo.html', 
    link: function(scope, element, attrs) { 
     if(scope.info.status == 'running') { 
     scope.buttonText = 'Pause'; 
     scope.act = 'pause'; 
     } 
     else { 
     scope.buttonText = 'Play'; 
     scope.act = 'play-circle';   
     } 

     scope.sos = function() { 
     if (scope.info.status == 'paused') { 
      scope.info.status = "running"; 
      scope.buttonText = "Pause"; 
      scope.act = "pause"; 
     } 
     else { 
      scope.info.status = "paused"; 
      scope.buttonText = "Play"; 
      scope.act = "play-circle"; 
     } 
     } 
     scope.deleteVM = function(){ 
     scope.rmv(); 
     } 
    }, 
    }; 
});

我使用NG-重複再重複

<div class="row" ng-repeat="vm in vms"> 
    <vm-info info="vm"></vm-info> 
</div>

的模板指令我有一個按鈕內應該觸發ng-click（）

<button type="button" class="btn btn-danger btn-lg center-block" ng-click="removeVM">Delete <span class='glyphicon glyphicon-remove'></span></button>

我想單擊刪除按鈕並從範圍中刪除特定項目。所以當範圍重新加載時，那個項目的div也不會在那裏，但onclick並不是從模板內部觸發的。請幫助我是angularjs的新手，指令對我來說很棘手。

來源

2016-01-08 user2612136

它仍然不工作，我把控制器中的功能提醒內部進行測試，並且它沒有觸發 – user2612136

在您的指令中，您試圖綁定rmv，但您絕不會將rmv指定爲vm-info指令。

<div class="row" ng-repeat="vm in vms"> 
    <vm-info info="vm" rmv="removeVM"></vm-info> 
</div>

點擊時將評估ng-click。我猜測它應該將虛擬機傳遞給控制器。不要讓指令通過中間方法調用此方法，您可以直接將rmv函數傳遞給ng-click並從指令中取出deleteVM方法。

<button type="button" 
     class="btn btn-danger btn-lg center-block" 
     ng-click="rmv(info)"> 
    Delete <span class='glyphicon glyphicon-remove'></span> 
</button>

最後，控制器接收到vm並將其刪除。

$scope.removeVM = function(vm){ 
    // remove vm from $scope.vms 
}

來源

2016-01-08 22:04:03

感謝man @Micah Williamson喜歡的魅力，對於遲到的回覆感到抱歉！ – user2612136

沒問題。你能將我的答案設置爲「選擇答案」嗎？ –

您正在處理的模塊控制器的點擊，而你應該通過指令控制的另一種方式是通過增加ng-click您隔離指令範圍，以你的函數傳遞到範圍變量做到這一點。

來源

2016-01-08 22:06:50

雖然你可以這樣解決它，但我建議使用$ emit來達到這個目的。

您可以在父範圍上編寫事件處理函數$on，而不是將父範圍的函數傳遞給子範圍，然後使用$emit從子範圍中發出事件。

在事件處理程序中，您可以刪除所需的記錄。

來源

2016-01-08 22:39:11

從父範圍數組中刪除項目

回答

相關問題