ng-style 内部的多个函数

Posted

技术标签:

【中文标题】ng-style 内部的多个函数【英文标题】:Multiple functions inside of ng-style 【发布时间】:2017-11-22 04:27:33 【问题描述】:

我的桌子上有一些颜色有问题。我创建了一个与我在表格的样式标签中使用的另一个函数几乎相同的函数。

有没有办法在 Angular 的一个样式标签中调用两个函数? (我是 Angular 新手,所以我不能 100% 确定它是否称为样式标签。)

我想包含的两个函数是 isPTO 和 isHol。目前我只能让 isPTO 或 isHol 正确显示,但我不知道如何让两者都显示。

这是我的代码:

索引.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" media="all" href="app.css" />
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/domo.js"></script>
    <script src="js/app.js"></script>      
  </head>
  <body ng-app="rcr_sched" ng-controller="main">
      <div id="mydiv">
        <table>
            <tr id="printc"><button id="print" class="fa fa-print fa-3x" onclick="print('#mydiv')"></button>
            <button id="print2" onclick="print('#mydiv')">Print Page</button>
            </tr>
            <tr  id="header">
                <th ng-repeat="prop in columns">prop.date</th>
            </tr>  
            <tr ng-repeat="r in data">
                <td align="center" ng-repeat="prop2 in columns" class="getColor(r.TeamRank, r.Team, prop2.title)" style="isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])">
                    r[prop2.title]
                </td>
            </tr>
        </table>
          <hr id="end">
      </div>      
  </body>
</html>

App.js

var app = angular.module('rcr_sched',['ngRoute']);

 app.config(['$routeProvider',
  function($routeProvider) 
    $routeProvider
       .when('/',
           templateUrl:'index.html',
           controller:'main'
       )
       .when('drill',
           templateUrl:'drill.html'
       )
//       .otherwise(redirectTo: '/');  
    
 ]);
//Range Error: Maximum call stack size exceeded

app.controller('main', ['$scope', '$location', function ($scope, $location)
        $scope.goNext = function(view)
            $location.path('/');
        
        $scope.data = [];
        $scope.columns = [];
        $scope.currentDate = new Date();
        $scope.calculateDate = function() 
            var x = new Date();
            return 
                'MonThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk',
                'TueThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk',
                'WedThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk',
                'ThuThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk',
                'FriThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk',
                'MonNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk',
                'TueNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk',
                'WedNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk',
                'ThuNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk',
                'FriNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk',
                'Mon2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks',
                'Tue2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks',
                'Wed2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks',
                'Thu2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks',
                'Fri2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'
            
        
        $scope.isPTO = function(rowTitle, ptoTitle, value) 
            if (rowTitle == (ptoTitle.replace('PTO', '')) && value) 
                return 'background-color: #7DD961;';
            
            return '';
        
        $scope.isHol = function(rowTitle, holTitle, value )
            if (rowTitle == (holTitle.replace('Hol', '')) && value)
                return 'background-color: #AA8CC5;';
            
            return '';
        

        function print(elem)
            Popup($('<div/>').append($(elem).clone()).html());
        

        function Popup(data) 

    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    mywindow.print();
  //  mywindow.close();
    return true;


        $scope.dateOptions = $scope.calculateDate();
        $scope.getColor = function(teamRank, team, prop) 
            let today = new Date();

            if (prop == 'Team' || prop == 'TeamMember') 
            
                if (team == 'Unassigned') 
                
                    return "grayClass";
                
                else if (team == 'Gold One') 
                
                    return "goldClass";
                
                else if (team == 'Red One' || team == 'Red Two') 
                
                    return "redClass";
                
                else if (team == 'Blue One' || team == 'Blue Two') 
                    return "blueClass"
                
                else if (team == 'Green One') 
                
                    return "greenClass";
                
                else
                
                    return "grayClass";
                
            
            if(prop == 'MonThisWk' || prop == 'Mon2Wks')
           
               if(today.getDay() == 1)
               
                    return "highlightClass";   
                
           
           if(prop == 'TueThisWk' || prop == 'Tue2Wks')
           
               if(today.getDay() == 2)
               
                    return "highlightClass";   
               
           
           if(prop == 'WedThisWk' || prop == 'Wed2Wks')
           
               if(today.getDay() == 3)
               
                    return "highlightClass";   
               
           
           if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
           
               if(today.getDay() == 4)
               
                    return "highlightClass";   
               
           
            if(prop == 'FriThisWk' || prop == 'Fri2Wks')
           
               if(today.getDay() == 5)
               
                    return "highlightClass";   
               
           

        

        domo.get('data/v1/master?fields=Team,TeamMember,TotalJobs,NDD,Past,MonThisWk,TueThisWk,WedThisWk,ThuThisWk,FriThisWk,MonNextWk,TueNextWk,WedNextWk,ThuNextWk,FriNextWk,Mon2Wks,Tue2Wks,Wed2Wks,Thu2Wks,Fri2Wks,FutureDates,TotalJobs,PTOMonThisWk,PTOTueThisWk,PTOWedThisWk,PTOThuThisWk,PTOFriThisWk,PTOMon2Wks,PTOTue2Wks,PTOWed2Wks,PTOThu2Wks,PTOFri2Wks,PTOMonNextWk,PTOTueNextWk,PTOWedNextWk,PTOThuNextWk,PTOFriNextWk,HolMonThisWk,HolTueThisWk,HolWedThisWk,HolThuThisWk,HolFriThisWk,HolMonNextWk,HolTueNextWk,HolWedNextWk,HolThuNextWk,HolFriNextWk,HolMon2Wks,HolTue2Wks,HolWed2Wks,HolThu2Wks,HolFri2Wks&groupby=TeamRank,Team,TeamMember&orderby=TeamRank')
            .then(function(data)
                $scope.data = data;
                for (prop in data[0]) 
                    if ($scope.dateOptions[prop]) 
                        var newDate = $scope.dateOptions[prop];
                        var formattedProp = date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title;
                    
                    else 
                        var formattedProp = date: prop, title: prop;
                    
                    $scope.columns.push(formattedProp);
                
                $scope.$apply();
            )
    ]);

app.controller('drill', ['$scope', '$location', function ($scope, $location)
        $scope.goNext = function(view)
            $location.path('drill');
        
        $scope.data = [];
        $scope.columns = [];
        $scope.currentDate = new Date();
        $scope.calculateDate = function() 
            var x = new Date();
            return 
                'MonThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk',
                'TueThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk',
                'WedThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk',
                'ThuThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk',
                'FriThisWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk',
                'MonNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk',
                'TueNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk',
                'WedNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk',
                'ThuNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk',
                'FriNextWk': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk',
                'Mon2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks',
                'Tue2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks',
                'Wed2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks',
                'Thu2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks',
                'Fri2Wks': date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'
            
        
        $scope.isPTO = function(rowTitle, ptoTitle, value) 
            if (rowTitle == (ptoTitle.replace('PTO', '')) && value) 
                return 'background-color: #32CD32;';
            
            return '';
        

        function print(elem)
            Popup($('<div/>').append($(elem).clone()).html());
        

        function Popup(data) 

    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    mywindow.print();
  //  mywindow.close();
    return true;


        $scope.dateOptions = $scope.calculateDate();
        $scope.getColor = function(teamRank, team, prop) 
            let today = new Date();

            if (prop == 'Team' || prop == 'TeamMember') 
            
                if (team == 'Unassigned') 
                
                    return "grayClass";
                
                else if (team == 'Gold One') 
                
                    return "goldClass";
                
                else if (team == 'Red One' || team == 'Red Two') 
                
                    return "redClass";
                
                else if (team == 'Blue One' || team == 'Blue Two') 
                    return "blueClass"
                
                else if (team == 'Green One') 
                
                    return "greenClass";
                
                else
                
                    return "grayClass";
                
            
            if(prop == 'MonThisWk' || prop == 'Mon2Wks')
           
               if(today.getDay() == 1)
               
                    return "highlightClass";   
                
           
           if(prop == 'TueThisWk' || prop == 'Tue2Wks')
           
               if(today.getDay() == 2)
               
                    return "highlightClass";   
               
           
           if(prop == 'WedThisWk' || prop == 'Wed2Wks')
           
               if(today.getDay() == 3)
               
                    return "highlightClass";   
               
           
           if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
           
               if(today.getDay() == 4)
               
                    return "highlightClass";   
               
           
            if(prop == 'FriThisWk' || prop == 'Fri2Wks')
           
               if(today.getDay() == 5)
               
                    return "highlightClass";   
               
           

        

        domo.get('data/v1/master?fields=Team,TeamMember,JobNumber&groupby=TeamRank,Team,TeamMember&orderby=TeamRank')
            .then(function(data)
                $scope.data = data;
                for (prop in data[0]) 
                    if ($scope.dateOptions[prop]) 
                        var newDate = $scope.dateOptions[prop];
                        var formattedProp = date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title;
                    
                    else 
                        var formattedProp = date: prop, title: prop;
                    
                    $scope.columns.push(formattedProp);
                
                $scope.$apply();
            )
    ]);

App.css

body
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: xx-small;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;


a
    color: black;
    text-align: center;
    padding-left: 15px


table
    border-collapse: collapse;


th
    border: 2px solid black;
    padding-right: 10px;
    padding-left: 10px;


td
    border: 2px solid white;
    padding-right: 10px;
    padding-left: 10px;


td
    background-color: #ececec;


hr 
    margin: 0;
    border-top: 2px solid black;
    width: 1504px;


.redClass 
    background-color: #ffbbb3;


.blueClass 
    background-color: #b3d1ff;


.grayClass 
    background-color: #D9D9D9;


.goldClass 
    background-color: #efe68f;


.greenClass 
    background-color: #b0e89f;


.ptoClass 
    background-color: #52D08F;


.highlightClass 
    background-color: #FEF65B;



.hideClass 
    background-color: white;
    color: white;

#header
    background-color: #D9D9D9;
    font-size: 19px;


#print
    background-color: white;
    margin-bottom: 1px;
    border: none;


#print2
    border: none;
    background-color: white;
    align-content: right;
/*    font-family: 'Roboto', sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 1px;


td:nth-child(1)
    border-left-color: #2F4F4F;

td:nth-child(2)
    border-right-color: #2F4F4F;

td:nth-child(3)
    border-right-color: #2F4F4F;

td:nth-child(4)
    border-right-color: #2F4F4F;

td:nth-child(9)
    border-right-color: #2F4F4F;

td:nth-child(14)
    border-right-color: #2F4F4F;

td:nth-child(19)
    border-right-color: #2F4F4F;


td:nth-child(20)
    border-right-color: #2F4F4F; 

td:nth-child(21)
    border-right-color: black;

td:nth-child(n+3)
    font-weight:bold;


th:nth-child(n+22)
    display: none;


td:nth-child(n+22) 
    display: none;    




@media print
    #print
        visibility: hidden;
    

    #print2
        visibility: hidden;
    

    #link
        display: none;
    


【问题讨论】:

【参考方案1】:

我不能 100% 确定这是否是正确的方法,但我发现如果我将函数放在这样的位置:style="isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title]) || isHol(prop2.title, 'Hol' + prop2.title, r['Hol' + prop2.title])"

它完全按照我想要的方式工作。我正在回答这个问题,希望它能帮助其他可能有类似问题的人。

【讨论】:

以上是关于ng-style 内部的多个函数的主要内容,如果未能解决你的问题,请参考以下文章

在 ng-style 中使用多个三元组

如何在 ng-style 指令中根据多个条件应用多种样式?

Python:如何允许“内部函数”更改多个“外部函数”中的非局部变量

如何通过函数获取 ng-style 的多 css 规则?

如何使用具有多个内部函数的非本地语句?

使用 ng-style 在 css 中动态转换