2016-12-28 8 views
0

私のコードは角度1でng-repeat要素をスタイルするにはどうすればよいですか?

<li ng-repeat="x in stats"> 
       {{ x.first + ' : ' + x.second }} 
</li> 

あるとJavaScriptコードが

$scope.statistics = [{"first" : "Full Name", "second" : "XYZ"},{"first" : "College", "second" : "Amity"}]; 

がどのように私はx.firstスタイルすることができ、特にx.second要素でしょうか?たとえば、「XYZ」と「Amity」を太字にするにはどうすればいいですか?

+0

'{{}} x.first:{{x.second}}' –

+1

要素ではなく、単一のテキスト・ノードを使用して....それはロケット科学 – charlietfl

+0

ではありませんしてくださいそれを太字にするにはタグを使用してください。 – Nitheesh

答えて

0

要素内に単純にラップし、要素にクラスを適用します。

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

 
app.controller('MainCtrl', function($scope) { 
 
$scope.statistics = [{"first" : "Full Name", "second" : "XYZ"},{"first" : "College", "second" : "Amity"}]; 
 
});
.bold 
 
{ 
 
    font-weight:bold; 
 
}
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <li ng-repeat="x in statistics"> 
 
    <span>{{x.first}} :</span> 
 
     <span class="bold">{{x.second}}</span> 
 

 
</li> 
 

 
    </body> 
 

 
</html>

0

ちょうどあなたのCSSを定義し、あなたの要素にクラスを適用します。

HTML:

<div ng-controller="MyCtrl"> 
    <li ng-repeat="x in stats"> 
    <span class="red">{{x.first}} :</span> 
    <span class="blue">{{x.second}}</span> 
    </li> 
</div> 

CSS:(コントローラーで)

.red { 
    color: red; 
} 

.blue { 
    color: blue; 
} 

はJavaScript:

$scope.stats = [{ 
    "first": "Full Name", 
    "second": "XYZ" 
    }, { 
    "first": "College", 
    "second": "Amity" 
    }]; 

JSFiddle:

https://jsfiddle.net/nikdtu/87rgzjmw/

関連する問題