Question

我的代码是

<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”粗体？

Answer 1

只需将其包装在元素中并在元素上应用类。

＆＃13;

__unsafe_unretained GPUImageUIElement *weakUIElementInput = uiElementInput;
[filter setFrameProcessingCompletionBlock:^(GPUImageOutput * filter, CMTime frameTime){
[weakUIElementInput update];
}];

＆＃13;

<html>
  <head>
    <script type="text/javascript" src="JS/header.js"></script>
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" /> 
  </head>

  <body>
    <div class="menustrip">
        <ul>
            <li><a href="index.php" onclick="OpenForm('register.php');">Register</a></li>
            <li><a href="index.php" onclick="OpenForm('search.php');">Search</a></li>
        </ul>
    </div>
    <div class="iframe" style="position:fixed;top:62px; left:0; width:100%; height:100%;" >
        <iframe name="main" id="main" src="" frameborder="0" width="99%" height="95%" align="left"><FONT FACE=ARIAL SIZE=3 COLOR="RED">Your Browser doesn't Support Required Component.</FONT></iframe>
    </div>    

  </body>
</html>

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.statistics = [{"first" : "Full Name", "second" : "XYZ"},{"first" : "College", "second" : "Amity"}];
});

＆＃13;

Answer 2

只需定义你的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/

如何在Angular 1中设置ng-repeat元素的样式？

2 个答案: