Question

使用Bootstrap v3.3.6设计一个最终将使用Angular JS进行数据呈现的模型。我有兴趣在导航栏中显示标题和数据，如下所示（在2行中）。小组没有做到公正，任何设计/造型帮助都会受到高度赞赏。

我到目前为止使用的html语法，

<div class="well">
  <nav class="navbar navbar-default">
        <div class="status-bar">
             <div class="col-sm-3">
                 <h5><a href="#" title="Name Element">Name</a></h5>
                     <h6> {Ford Company}</h6>
             </div>                 
        </div>                         
   </nav>
</div>

Answer 1

我不确定是否理解过。不过这是一个例子：

＆＃13;

var app = angular.module('app', ['ui.bootstrap']);

app.controller('MyCtrl', function ($scope, $rootScope) {
    
    $scope.fields =     [{
      label: "Name",
      value: "Ford Company"
    },{
      label: "Status",
      value: "Not approved"
    },{
      label: "City",
      value: "Dallas, Texas"
    }];

    
});

＆＃13;

.margin-10 {
  margin: 10px;
}

＆＃13;

<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="app.js"></script>
</head>

<body>

  <div class="well" ng-controller="MyCtrl">
    <nav class="navbar navbar-default2">
      <div class="status-bar">
        <div class="row">
          <div class="col-sm-3 thumbnail text-center margin-10" ng-repeat="field in fields">
            <h5><a href="#" title="Name Element">{{field.label}}</a></h5>
            <h6>{{field.value}}</h6>
          </div>
        </div>
      </div>
    </nav>
  </div>

</body>

</html>

＆＃13;

在导航栏中绑定标题和数据

1 个答案: