Angular Accordion面板顏色變化

我有一個手風琴，動態地添加了html控件。我試圖弄清楚如何在任何兒童控制器變髒時如何將手風琴的面板顏色改爲黃色;已被觸動。這是我到目前爲止的plnkr代碼。 [1]：http://plnkr.co/edit/MdMWysRUEtGOyEJUfheh?p=preview Angular Accordion面板顏色變化

下面的佈局。

<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和添加ID到要更改其顏色的元素：

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

    ... 

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

在JS，使用jQuery選擇由ID的元素和改變顏色，如果它是髒的：

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

來源

2014-11-20 19:16:12

您可以使用ngClass來實現這一點。通過在影響控制器中的變量的表單上附加ngChange指令。

附加額外的觀察器會增加性能開銷，因此您希望儘可能避免這種情況。

此外，對此表單使用表格可能沒有意義。它看起來像你用它來格式化？

來源

2014-11-20 20:04:43

Angular Accordion面板顏色變化

回答

相關問題