각도 js에서 선택한 행에 CSS를 넣는 방법은 무엇입니까?

Akshay Kumar

angularjs에서 할 일 목록을 만들고 있습니다. 거의 완료되었습니다. 제 질문은 편집 버튼을 클릭 할 때 css 클래스 "노란색"을 추가하여 편집 모드에있는 전체 행을 강조 표시하고 싶습니다. 어떻게 해야할지 모르겠다 ...

제 코딩 방식이 옳거나 낡았다 고 누가 말할 수 있나요 .. 제발

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;
    }
솔로몬 탐

ng-classAngularJS에서 제공하는 지시문 을 사용할 수 있습니다 . 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}">

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

종이 js에서 선의 각도를 찾는 방법은 무엇입니까?

분류에서Dev

각도기에서 ng-autocomplete에서 요소를 선택하는 방법은 무엇입니까?

분류에서Dev

각도 표현에서 선택적 변수를 만드는 방법은 무엇입니까?

분류에서Dev

Mac의 nano에서 선택한 텍스트를 복사하여 붙여 넣는 방법은 무엇입니까?

분류에서Dev

각도 선택에서 옵션 값을 얻는 방법은 무엇입니까?

분류에서Dev

각도 ivh 트리 뷰에서 선택한 노드 목록을 얻는 방법은 무엇입니까?

분류에서Dev

각도 구성 요소 [의 선택자]를 변수에 입력하는 방법은 무엇입니까?

분류에서Dev

webapp에서 각도기를 실행하는 방법은 무엇입니까?

분류에서Dev

행을 삽입 한 후에도 선택한 셀 참조를 유지하는 Google 시트에서 코딩하는 방법은 무엇입니까?

분류에서Dev

선택한 번호를 다음 편집 텍스트에 넣는 방법은 무엇입니까?

분류에서Dev

R 각 그룹에서 한 쌍의 연도를 선택하고 계산하는 방법은 무엇입니까? (롤링 시간)

분류에서Dev

datepickerdialog android에서 연도를 선택하는 방법은 무엇입니까?

분류에서Dev

CSS로 요소를 한 줄에 넣는 방법은 무엇입니까?

분류에서Dev

AngularJS에서 선택한 행에 대한 데이터를 수집하는 방법은 무엇입니까?

분류에서Dev

Meteor에서 선택한 CSS에 CSS를 적용하는 방법은 무엇입니까?

분류에서Dev

JTable에서 한 번에 하나의 행만 선택하도록 허용하는 방법은 무엇입니까?

분류에서Dev

jQuery-선택한 요소에서 '각'기능을 수행하는 방법은 무엇입니까?

분류에서Dev

각도에서 PATCH 방법에 대한 상태 코드를 얻는 방법은 무엇입니까?

분류에서Dev

css not () 선택기에 두 개 이상의 클래스를 넣는 방법은 무엇입니까?

분류에서Dev

각도 js에서 행의 텍스트를 편집하는 방법은 무엇입니까?

분류에서Dev

대각선 주위에만 벨트가 필요한 경우 numpy에서 행렬 곱셈 속도를 높이는 방법은 무엇입니까?

분류에서Dev

테이블의 여러 값에 대한 최대 연도를 선택하는 방법은 무엇입니까?

분류에서Dev

개체에 따라 각도로 테이블 행을 선택하는 방법은 무엇입니까?

분류에서Dev

각도에서 iframe에 src를 삽입하는 방법은 무엇입니까?

분류에서Dev

여행 방향지도에 자신의 선택 마커를 추가하는 방법은 무엇입니까?

분류에서Dev

ggplot2에서 선분 사이에 각도 호를 그리는 방법은 무엇입니까?

분류에서Dev

Julia에서 별도의 벡터에 행렬의 짝수를 넣는 방법은 무엇입니까?

분류에서Dev

선택한 행에서 호버 효과를 제거하는 방법은 무엇입니까?

분류에서Dev

Tkinter의 선택한 행에서 데이터를 얻는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    종이 js에서 선의 각도를 찾는 방법은 무엇입니까?

  2. 2

    각도기에서 ng-autocomplete에서 요소를 선택하는 방법은 무엇입니까?

  3. 3

    각도 표현에서 선택적 변수를 만드는 방법은 무엇입니까?

  4. 4

    Mac의 nano에서 선택한 텍스트를 복사하여 붙여 넣는 방법은 무엇입니까?

  5. 5

    각도 선택에서 옵션 값을 얻는 방법은 무엇입니까?

  6. 6

    각도 ivh 트리 뷰에서 선택한 노드 목록을 얻는 방법은 무엇입니까?

  7. 7

    각도 구성 요소 [의 선택자]를 변수에 입력하는 방법은 무엇입니까?

  8. 8

    webapp에서 각도기를 실행하는 방법은 무엇입니까?

  9. 9

    행을 삽입 한 후에도 선택한 셀 참조를 유지하는 Google 시트에서 코딩하는 방법은 무엇입니까?

  10. 10

    선택한 번호를 다음 편집 텍스트에 넣는 방법은 무엇입니까?

  11. 11

    R 각 그룹에서 한 쌍의 연도를 선택하고 계산하는 방법은 무엇입니까? (롤링 시간)

  12. 12

    datepickerdialog android에서 연도를 선택하는 방법은 무엇입니까?

  13. 13

    CSS로 요소를 한 줄에 넣는 방법은 무엇입니까?

  14. 14

    AngularJS에서 선택한 행에 대한 데이터를 수집하는 방법은 무엇입니까?

  15. 15

    Meteor에서 선택한 CSS에 CSS를 적용하는 방법은 무엇입니까?

  16. 16

    JTable에서 한 번에 하나의 행만 선택하도록 허용하는 방법은 무엇입니까?

  17. 17

    jQuery-선택한 요소에서 '각'기능을 수행하는 방법은 무엇입니까?

  18. 18

    각도에서 PATCH 방법에 대한 상태 코드를 얻는 방법은 무엇입니까?

  19. 19

    css not () 선택기에 두 개 이상의 클래스를 넣는 방법은 무엇입니까?

  20. 20

    각도 js에서 행의 텍스트를 편집하는 방법은 무엇입니까?

  21. 21

    대각선 주위에만 벨트가 필요한 경우 numpy에서 행렬 곱셈 속도를 높이는 방법은 무엇입니까?

  22. 22

    테이블의 여러 값에 대한 최대 연도를 선택하는 방법은 무엇입니까?

  23. 23

    개체에 따라 각도로 테이블 행을 선택하는 방법은 무엇입니까?

  24. 24

    각도에서 iframe에 src를 삽입하는 방법은 무엇입니까?

  25. 25

    여행 방향지도에 자신의 선택 마커를 추가하는 방법은 무엇입니까?

  26. 26

    ggplot2에서 선분 사이에 각도 호를 그리는 방법은 무엇입니까?

  27. 27

    Julia에서 별도의 벡터에 행렬의 짝수를 넣는 방법은 무엇입니까?

  28. 28

    선택한 행에서 호버 효과를 제거하는 방법은 무엇입니까?

  29. 29

    Tkinter의 선택한 행에서 데이터를 얻는 방법은 무엇입니까?

뜨겁다태그

보관