0
동적으로 추가 된 아코디언이 있습니다. 어떤 하위 컨트롤이 더러워지면 아코디언 패널의 색상을 노란색으로 변경하는 방법을 알아 내려고합니다. 터치되었습니다. 여기까지 필자가 가지고있는 plnkr 코드가있다. [1] : http://plnkr.co/edit/MdMWysRUEtGOyEJUfheh?p=preview각도 아코디언 패널 색상 변경
아래의 레이아웃. 이 togglecolor 지시어가 작동하는 방법을
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.cs" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body ng-controller="bookcontroller">
<accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="true">
<accordion-group is-open="isopen" >
<accordion-heading class="container-fluid grey">
Book Hearder
</accordion-heading>
<form name="form">
<div class="form-row" ng-repeat="record in records">
<table>
<tr ng-formfield></tr>
</table>
</div>
</form>
</accordion-group>
</accordion>
</body>
</html>
SCRIPT.JS 코드
var app = angular.module("app", ['ui.bootstrap']);
app.controller('bookcontroller', ['$scope', function ($scope) {
$scope.records=[
{
RecordId: 91,
Type:'Label',
Label: 'Favoritebook'
},
{
RecordId: 92,
Type: 'Dropdown',
Label: 'Favoritebook',
DDLValue: [{ 'value': '1', 'text': 'HarryPotter' },
{ 'value': '2', 'text': 'StarGate' }]
},
{
RecordId: 93,
Type:'Text',
Label: 'The TextBox'
}]
}
]);
app.directive('ngFormfield', function ($compile) {
return {
link: function (scope, element, attrs) {
if (scope.record.Type == 'Label') {
element.html('<label togglecolor type="label" ng-model="record.DDLValue.value"/>' + scope.record.Label + '</label>');
}
else if (scope.record.Type == 'Text') {
element.html('<td colspan="8">'+scope.record.Label + ': <input togglecolor type="text" name="fname"></td>');
}
else if (scope.record.Type == 'Dropdown') {
element.html('<td colspan="8"><select class="btn btn-default dropdown" togglecolor ng-model=record.DDLValue.value ng-options="obj.value as obj.text for obj in record.DDLValue"></select></td>');
}
$compile(element.contents())(scope);
}
}
});
app.directive('togglecolor', [function(){
return{
restrict: 'A',
link: function(scope, element, attrs, controller){
scope.$watch(function() {return element.attr('class'); }, function(newValue){
debugger;
if (element.hasClass('ng-dirty')) {
element.parent().addClass('toggle-yellow');
} else {
element.parent().removeClass('toggle-yellow');
}
});
}
}
}]);
어떤 생각?