AngularJS改變屬性值

我在表中的行，其產生的按鈕動態AngularJS改變屬性值

<tr ng-repeat="task in task"> 
    <td>{{task.Name}}</td> 
    <td>{{task.Comments}}</td> 
    <td>{{task.Project}}</td> 
    <td>{{task.Duration}}</td> 
    <td> 
     <button class={{editable}} ng-click="editTask(task.id)"></button> 
     <button class="glyphicon glyphicon-trash"></button> 
    </td> 
    </tr>

在我的角碼我有

$scope.editTask = function(id){ 
     if($scope.editable == "glyphicon glyphicon-edit"){ 
     $scope.editable="glyphicon glyphicon-floppy-save"; 
     } 
     else{ 
      $scope.editable="glyphicon glyphicon-edit" 
     } 
    }

所以基本上我想改變編輯glyphicon保存glyphicon和將glyphicon保存回編輯glyphicon。但是因爲我已經將按鈕分配給了按鈕，它將更改表格中所有按鈕的圖標。我怎樣才能改變只點擊按鈕的圖標？

來源

2016-09-29 Aniruddha Bhondwe

方法1

您可以更新您的HTML

<td> 
    <button class="glyphicon" ng-class="task.editable" ng-click="editTask(task)"></button> 
    <button class="glyphicon glyphicon-trash"></button> 
</td>

傳遞任務，而不是id直接讓你更新它直接是在taskeditable狀態。你的控制器應更新editable財產

$scope.editTask = function(task){ 
    if(task.editable == "glyphicon-edit") { 
     task.editable="glyphicon-floppy-save"; 
    } 
    else{ 
     task.editable="glyphicon-edit" 
    } 
}

注：我已經通過直接類的按鈕，因爲它不會改變。

方法2

你也可以接近它的另一種方式，並保持狀態的HTML

<button class="glyphicon" ng-class="task.editable ? 'glyphicon-edit': 'glyphicon-floppy-save'" ng-click="editTask(task)"></button>

而且你的控制器可以只更新editable財產

$scope.editTask = function(task){ 
    task.editable = !task.editable; 
}

來源

2016-09-29 13:30:33 taguenizy

在task本身上設置editable屬性，然後使用task.editable。這將是每個task

來源

2016-09-29 13:20:39

獨特的財產分配editable變量的task對象：

$scope.editTask = function(task){ 
    if(task.editable == "glyphicon glyphicon-trash") 
     task.editable="glyphicon glyphicon-floppy-save";   
    else 
     task.editable="glyphicon glyphicon-trash";   
}

，並在你的HTML：

<button ng-class="editable" ng-click="editTask(task)"></button>

這樣，你最終會每個對象都有一個獨特的類。

此外，請記住使用ng-class而不是普通的class屬性。

來源

2016-09-29 13:21:05 Luxor001

你需要對您的代碼進行一些更改。我將爲您提供我用來實現我認爲是您的目標的代碼，然後解釋其背後的原因。

<table> 
    <tr ng-repeat="task in tasks"> 
     <td>{{task.Name}}</td> 
     <td>{{task.Comments}}</td> 
     <td>{{task.Project}}</td> 
     <td>{{task.Duration}}</td> 
     <td> 
     <button class={{task.editable}} ng-click="editTask($index)"></button> 
     <button class="glyphicon glyphicon-trash"></button> 
     </td> 
    </tr> 
    </table>

正如你所看到的，我包括了一個稱爲編輯裏面的任務的屬性。我將使用這個屬性來改變這個類。您還會注意到我使用$index。這是ng-repeat的默認計數器。

$scope.tasks.push({Name: 'Jorge', Comments: 'Comentario',Project: 'Tengu', Duration: 45, editable: "glyphicon glyphicon-trash"}); 
$scope.tasks.push({Name: 'Mermelada', Comments: 'Comentario2',Project: 'DM-300', Duration: 30, editable: "glyphicon glyphicon-trash"});

您需要將可編輯屬性添加到對象中。

$scope.editTask = function(id){ 
     if($scope.tasks[id].editable == "glyphicon glyphicon-trash"){ 
     $scope.tasks[id].editable="glyphicon glyphicon-floppy-save"; 
     } else{ 
      $scope.tasks[id].editable="glyphicon glyphicon-trash" 
     } 
    }

我不認爲這需要很多解釋。請不要讓我知道。

來源

2016-09-29 13:50:56 abullrich

如果你只是想類之間切換，只需使用ng-class

爲例，你有一個變量leftOrRight，我們將假定你有兩個班在你的CSS文件：floatLeft和floatRight（與屬性float: right/left;）

ng-class="{ floatRight : leftOrRight == 'right', floatLeft : leftOrRight == 'left' }"

如果您將leftOrRight設置爲「right」，您將擁有與class="floatRight"相同的內容。

來源

2016-09-29 13:58:13 xoxel

AngularJS改變屬性值

回答

相關問題