как поставить css в выбранную строку в угловых js?

Question

Я создаю список todo в angularjs .. его почти сделали .. мой вопрос, когда я нажимаю кнопку редактирования, я хочу выделить полную строку, которая находится в режиме редактирования, добавив класс css «yellow» ... но я понятия не имею, как это сделать ...

и может кто-нибудь сказать мне, мой способ кодирования является правильным или worng .. пожалуйста

jsfiddle ссылка

http://jsfiddle.net/mcVfK/1338/

вот мой код

HTML

<div ng-app="myapp"> 
<div class="container" ng-controller="mainCtrl"> 
     <h3>Todo List</h3> 
     <input type="text" class="form-control" placeholder="create your todos" ng-model="newItem"> 
     <p class="help-block text-center red" ng-show="!newItem && empty">*Fill the field.</p> 
     <br> 

     <table class="table"> 
      <thead> 
       <tr> 
        <th>#</th> 
        <th>Todo</th> 
        <th>Status</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="todoList in todoLists"> 
        <td>{{$index+1}}</td> 
        <td>{{todoList.name}}</td> 
        <td>{{todoList.edit}}</td> 
        <td><a class="btn {{disabled}} pull-right" href="" ng-click="remove(todoList)">delete</a> 
         <a class="btn {{disabled}} pull-right" href="" ng-click="edit($index)">edit</a> </td> 
        </tr> 
       </tbody> 
      </table> 


      <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="add()" ng-hide="editMode">ADD</button> 
      <button type="button" class="btn btn-default btn-lg btn-block" ng-click="update(newItem)" ng-show="editMode">UPDATE</button> 
     </div> 
</div> 

мой JS файл

var app = angular.module("myapp", []); 
app.controller("mainCtrl", ["$scope", "$rootScope", function($scope, $rootScope){ 
    $scope.empty = false; 
    $scope.editMode = false; 

    $scope.todoLists = [{name : "one", edit : "false"},{name : "two", edit : "false"}]; 

    $scope.add = function(){ 
     if(!$scope.newItem == ""){ 
      $scope.todoLists.push({name:$scope.newItem, edit:"false"}); 
      $scope.newItem = ""; 
      $scope.empty = false; 
     }else{ 
      $scope.empty = true; 
     }; 
    }; 

    $scope.remove = function(item){ 
     var index = $scope.todoLists.indexOf(item); 
     $scope.todoLists.splice(index, 1); 
    }; 

    $scope.edit = function(index){ 
     $rootScope.ind = index; 
     $scope.newItem = $scope.todoLists[$rootScope.ind].name; 
     $scope.editMode = true; 
     $scope.disabled = "disabled"; 
     $scope.todoLists[index].edit = "true"; 
    }; 

    $scope.update = function(item){ 
     if(!$scope.newItem == ""){ 
      $scope.todoLists[$rootScope.ind].name = item; 
      $scope.todoLists[$rootScope.ind].edit = "false"; 
      $scope.editMode = false; 
      $scope.newItem = ""; 
      $scope.disabled = ""; 
     }else{ 
      $scope.empty = true; 
     }; 
    }; 


}]); 

CSS файл

.yellow{ 
     background:yellow; 
    } 
    .red{ 
     color:red; 
    } 

Answer 1

Вы можете использовать ng-class директива, предоставляемая компанией AngularJS. https://docs.angularjs.org/api/ng/directive/ngClass

Изменить

<tr ng-repeat="todoList in todoLists"> 

в

<tr ng-repeat="todoList in todoLists" ng-class="{yellow: editMode && $index == ind}"> 

Answer 2

я добавил код обновления здесь, пожалуйста, посмотрите на него.

вам следует использовать ng-класс.

var app = angular.module("myapp", []); 
 
app.controller("mainCtrl", ["$scope", "$rootScope", 
 
    function($scope, $rootScope) { 
 
    $scope.empty = false; 
 
    $scope.editMode = false; 
 

 
    $scope.todoLists = [{ 
 
     name: "one", 
 
     edit: "false", 
 
     "todoeditclick": false 
 
    }, { 
 
     name: "two", 
 
     edit: "false", 
 
     "todoeditclick": false 
 
    }]; 
 

 
    $scope.add = function() { 
 
     if (!$scope.newItem == "") { 
 
     $scope.todoLists.push({ 
 
      name: $scope.newItem, 
 
      edit: "false" 
 
     }); 
 
     $scope.newItem = ""; 
 
     $scope.empty = false; 
 
     } else { 
 
     $scope.empty = true; 
 
     }; 
 
    }; 
 

 
    $scope.remove = function(item) { 
 
     var index = $scope.todoLists.indexOf(item); 
 
     $scope.todoLists.splice(index, 1); 
 
    }; 
 

 
    $scope.edit = function(index) { 
 
     $rootScope.ind = index; 
 
     $scope.newItem = $scope.todoLists[$rootScope.ind].name; 
 
     $scope.editMode = true; 
 
     $scope.disabled = "disabled"; 
 
     $scope.todoLists[index].edit = "true"; 
 
    }; 
 

 
    $scope.update = function(item) { 
 
     if (!$scope.newItem == "") { 
 
     $scope.todoLists[$rootScope.ind].name = item; 
 
     $scope.todoLists[$rootScope.ind].edit = "false"; 
 
     $scope.todoLists[$rootScope.ind].todoeditclick = false; 
 
     $scope.editMode = false; 
 
     $scope.newItem = ""; 
 
     $scope.disabled = ""; 
 

 
     } else { 
 
     $scope.empty = true; 
 
     }; 
 
    }; 
 

 

 
    } 
 
]);

.yellow { 
 
    background: yellow; 
 
} 
 
.red { 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div class="container" ng-controller="mainCtrl"> 
 
    <h3>Todo List</h3> 
 
    <input type="text" class="form-control" placeholder="create your todos" ng-model="newItem"> 
 
    <p class="help-block text-center red" ng-show="!newItem && empty">*Fill the field.</p> 
 
    <br> 
 

 

 

 

 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>Todo</th> 
 
      <th>Status</th> 
 
      <th></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="todoList in todoLists" ng-class="{yellow:todoList.todoeditclick}"> 
 
      <td>{{$index+1}}</td> 
 
      <td>{{todoList.name}}</td> 
 
      <td>{{todoList.edit}}</td> 
 
      <td><a class="btn {{disabled}} pull-right" href="" ng-click="remove(todoList)">delete</a> 
 
      <a class="btn {{disabled}} pull-right" href="" ng-click="edit($index);todoList.todoeditclick=!todoeditclick">edit</a> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 

 

 
    <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="add()" ng-hide="editMode">ADD</button> 
 
    <button type="button" class="btn btn-default btn-lg btn-block" ng-click="update(newItem)" ng-show="editMode">UPDATE</button> 
 
    </div> 
 
</div>

Answer 3

Quick and ugly example, основанный на вашей скрипке. В основном вы хотите использовать ng-class для запуска функции, которая возвращает класс, если выполняется условие. В этом случае при выборе TODO для редактирования, вы можете установить, что в качестве selectedTodo на $ объеме:

$scope.edit = function(index){ 
     $scope.selectedToDo = $scope.todoLists[index]; 
     .... 
    }; 

И тогда Вы можете установить ng-class на ваш <tr> элемента, который будет проверять, если выбран TODO этой строки в и вернуть класс, .highlighted в этом случае, если это так.

$scope.isSelected = function(item) { 
     if ($scope.selectedToDo === item) { 
      return 'highlighted'; 
     } 
    }; 

Answer 4

Простой пример использования ng-class используя красный класс у вас уже есть в демо

<tr ng-repeat="todoList in todoLists" 
    ng-class="{red:active.item == todoList}" 
    ng-click="active.item=todoList"> 

В контроллере

$scope.active={item:null} 

Answer 5

Вам просто нужно использовать ng-class добавить класс CSS во время выполнения основанный на selectedIndex, который содержит индекс текущей строки в режиме редактирования.

HTML код:

<tr ng-repeat="todoList in todoLists" ng-class="{'yellow':selectedIndex== $index }"> 

Угловая JS код:

$scope.edit = function(index) { 
    $scope.selectedIndex = index; 
    ... 
}; 

//clear the selectedIndex to negative index -1 
    $scope.update = function(item) { 
    if (!$scope.newItem == "") { 
    $scope.selectedIndex = -1; 
    ... 
    }; 

Live Demo @JSFiddle

Answer 6

Существует еще один способ назначить другой класс для различных строк

ng-class-odd="'odd'" ng-class-even="'even'" 

код ниже

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> 
    <li ng-repeat="name in names"> 
    <span ng-class-odd="'odd'" ng-class-even="'even'"> 
    {{name}} &nbsp; &nbsp; &nbsp; 
    </span> 
    </li> 
</ol> 

CSS

.odd { 
    color: red; 
} 
.even { 
    color: blue; 
} 

, но единственное, что эта директива может быть применена только в пределах сферы действия ngRepeat.

Надеется, что это поможет ..

Answer 7

Есть много способов реализации this.A быстрое решения было бы передать $event с помощью метода редактирования конкретной строки.

<a class="btn {{disabled}} pull-right" href="" ng-click="edit($index,$event)">edit</a> </td> 

Тогда вы можете использовать $ event.target для доступа к элементу с щелчком. Затем вы можете использовать angular.element($event.target).parent().parent() для доступа к элементу строки.

Функция редактирования

var EditRow; 
    $scope.edit = function(index,$event){ 
     EditRow = angular.element($event.target).parent().parent(); 
     EditRow.css("background-color", "#ccc"); // change css style 
      $rootScope.ind = index; 
      $scope.newItem = $scope.todoLists[$rootScope.ind].name; 
      $scope.editMode = true; 
      $scope.disabled = "disabled"; 
      $scope.todoLists[index].edit = "true"; 
     }; 

функция Update

$scope.update = function(item){ 
    if(!$scope.newItem == ""){ 
      $scope.todoLists[$rootScope.ind].name = item; 
      $scope.todoLists[$rootScope.ind].edit = "false"; 
      $scope.editMode = false; 
      $scope.newItem = ""; 
      $scope.disabled = ""; 
     }else{ 
      $scope.empty = true; 
     }; 
    EditRow.css("background-color", "#fff"); //We change the style back 
    }; 

Вот рабочий fiddle.

Answer 8

Я обновил jsfiddle для и: http://jsfiddle.net/mv0ne441/ Вы можете использовать нг-класс директивы в элементе «т.р.» таблицы для всей строки подсветки, как вы сказали, в вопросе

<tr ng-repeat="todoList in todoLists" ng-class="{true:'yellow', false:'red'} [todoList.edit == 'true']"> 
    <td>{{$index+1}}</td> 
    <td>{{todoList.name}}</td> 
    <td>{{todoList.edit}}</td> 
    <td><a class="btn {{disabled}} pull-right" href="" ng-click="remove(todoList)">delete</a> 
        <a class="btn {{disabled}} pull-right" href="" ng-click="edit($index)">edit</a> 
    </td> 
</tr>