Изменение цвета угловой аккордеонной панели

У меня есть аккордеон, в котором динамически добавлены элементы управления html. Я пытаюсь понять, как изменить цвет панели аккордеона на желтый, когда какой-либо из элементов управления для детей станет грязным; был затронут. Вот код plnkr, который у меня есть. [1]: http://plnkr.co/edit/MdMWysRUEtGOyEJUfheh?p=preview Изменение цвета угловой аккордеонной панели

Макет ниже.

<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'); 
       } 
      }); 
     } 
    } 
}]);

Любая идея, как получить эту директиву togglecolor работает?

источник

2014-10-01 Keith

Я думаю, проблема в директиве togglecolor. Похоже, что element.parent() не является элементом, цвет которого вы хотите изменить.

Я бы рекомендовал вам выбрать элемент, который вы хотите явно изменить.

В HTML загрузить JQuery и добавить идентификатор к элементу, цвет которого вы хотите изменить:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 

    ... 

    <accordion-group id="bookHeader" is-open="isopen" >

В JS, с помощью JQuery, чтобы выбрать элемент по идентификатору и изменить цвет, если он загрязнен:

if (element.hasClass('ng-dirty')) { 
     $('#bookHeader').addClass('toggle-yellow'); 
    }

источник

2014-11-20 19:16:12

Вы можете использовать ngClass для этого. Либо добавив директиву ngChange в свои формы, которая влияет на переменную в контроллере.

Прикрепление дополнительного наблюдателя увеличивает производительность, поэтому вы можете избежать этого, когда это возможно.

Кроме того, может не иметь смысла использовать таблицу для этой формы. Похоже, вы используете его для форматирования?

источник

2014-11-20 20:04:43

Изменение цвета угловой аккордеонной панели

ответ

Смежные вопросы