"ng-repeat" पुनरावृत्ति

के अंदर AngularJs "ng-style" का उपयोग करके मैं ng-style का उपयोग करके उनके मान के आधार पर तालिका में डेटा तत्वों के रंगों को सशर्त रूप से सेट करने की कोशिश कर रहा हूं। एनजी दोहराव का उपयोग कर डेटा की प्रत्येक पंक्ति उत्पन्न की जा रही है।"ng-repeat" पुनरावृत्ति

<tr ng-repeat="payment in payments"> 
    <td ng-style="set_color({{payment}})">{{payment.number}}</td>

और ऐसा ही कुछ करता है मेरी नियंत्रक में एक समारोह:

$scope.set_color = function (payment) { 
    if (payment.number > 50) { 
    return '{color: red}' 
    } 
}

मैं एक जोड़े को अलग अलग बातें की कोशिश की है

तो मैं की तरह कुछ है। और यहां तक कि भुगतान ऑब्जेक्ट में डेटा एट्रिब्यूट के रूप में रंग भी सेट किया गया है, हालांकि ऐसा लगता है कि मुझे डेटा बाइंडिंग से डेटा संसाधित करने के लिए एनजी-स्टाइल नहीं मिल सकती है, क्या कोई इस तरीके को जानता है कि कोई तरीका जानता है? धन्यवाद। अपने कार्य से,

<td ng-style="set_color(payment)">{{payment.number}}</td>

वापसी एक वस्तु, एक नहीं स्ट्रिंग:

स्रोत

2013-04-19 Sean Geoffrey Pietz

का उपयोग {{}} एक Angular expression अंदर मत

$scope.set_color = function (payment) { 
    if (payment.number > 50) { 
    return { color: "red" } 
    } 
}

Fiddle

स्रोत

2013-04-19 19:30:01

इस प्रयोग कोड

<td style="color:{{payment.number>50?'red':'blue'}}">{{payment.number}}</td>

या

<td ng-style="{'color':(payment.number>50?'red':'blue')}">{{payment.number}}</td>

उदाहरण

स्रोत

2014-09-03 11:07:45

के लिए नीले रंग यह आपकी मदद कर सकता है!

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    .yelloColor { 
     background-color: gray; 
    } 
    .meterColor { 
     background-color: green; 
    } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script> 
    var app = angular.module('ngStyleApp', []); 
    app.controller('ngStyleCtrl', function($scope) { 
     $scope.bar = "48%"; 
    }); 
    </script> 
</head> 

<body ng-app="ngStyleApp" ng-controller="ngStyleCtrl"> 
    <div class="yelloColor"> 
    <div class="meterColor" ng-style="{'width':bar}"> 
     <h4> {{bar}} DATA USED OF 100%</h4> 
    </div> 
    </div> 
</body> 

</html>

स्रोत

2015-05-21 06:59:46

"ng-repeat" पुनरावृत्ति

उत्तर

संबंधित मुद्दे