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

Question

使用Bootstrapv3.3.6设计了一个mock-up最终会使用AngularJS进行数据渲染。我有兴趣在导航栏中显示标题和数据，如下所示（第 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

我不确定是否理解。但是这里有一个例子：

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"
    }];

    
});

.margin-10 {
  margin: 10px;
}

<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>

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

Bind title and data in navbar

css

navbar

twitter-bootstrap

angular-ui-bootstrap