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-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}">
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다