Question

尝试同时学习AngularJS和一堆漏洞（注定要出错）。

我做到了这一点，但是 bootstrap 无法解决问题..

<!DOCTYPE html>
<html ng-app="">

  <head>
    <meta charset="utf-8" />
    <title>Learning firebase and angularJS</title>
    <script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script data-require="chance@*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

  </head>

  <body style="margin:20px" ng-controller="employeeCtrl">
    <div class="">
      <button class="btn btn-default" ng-click="saveEmployee()">
        Save
                        <span class="glyphicon glyphicons-ok"></span>
      </button>
    </div>
    <div class="">
      <table class="table">
        <thead class="thead-inverse">
          <tr>
            <th>Datetime</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="label label-primary" id="datetime"></div>
            </td>
            <td>
              <label>Employee Name</label>
              <input type="text" ng-model="employeeName" />
            </td>
            <td>
              <label>Employee Age</label>
              <input type="number" ng-model="employeeAge" />
            </td>
          </tr>
        </tbody>
      </table>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Datetime</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody ng-repeat="employee in employees" ng-class-odd="oddRow">
          <tr>
            <td>{{employee.timestamp}}</td>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.employeeAge}}</td>
          </tr>
        </tbody>
      </table>

    </div>
    <script>
      function employeeCtrl($scope) {
        refresh = function() {
          $scope.employeeName = new Chance().name();
          $scope.employeeAge = new Chance().age();
        }
        $scope.employees = {};

        refresh();
        $scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");

        $scope.saveEmployee = function() {
          date = moment(new Date())
          dateStr = date.format('YYYY.MM.DD') + " @ " + date.format("LTS");
          $scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
          refresh();
        };

        $scope.myData.on('value', function(snapshot){
          $scope.employees = snapshot.val();
          $scope.$apply(); // temp. solution
        });

      };
    </script>
    <script>
      var datetime = null,  date = null;
      moment.locale('da');
      var update = function() {
        date = moment(new Date())
        dateStr = date.format('YYYY.MM.DD') + " @ " + date.format("LTS");
        datetime.html(dateStr);
      };

      $(document).ready(function() {
        datetime = $('#datetime')
        update();
        setInterval(update, 1000);
      });
    </script>
  </body>

</html>

http://plnkr.co/edit/MA52T3?p=preview

现在应该在保存按钮上出现一个条纹表和一个glyphicon ..但是没有..任何帮助将不胜感激。

奖金角表排问题

我首先尝试制作第一行的输入部分并执行角度for循环，但不知怎的，这不起作用..

<!DOCTYPE html>
<html ng-app="">

  <head>
    <meta charset="utf-8" />
    <title>Learning firebase and angularJS</title>
    <script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script data-require="chance@*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

  </head>

  <body style="margin:20px" ng-controller="employeeCtrl">
    <div class="">
      <button class="btn btn-default" ng-click="saveEmployee()">
        Save
                        <span class="glyphicon glyphicons-ok"></span>
      </button>
    </div>
    <div class="">
      <table class="table">
        <thead class="thead-inverse">
          <tr>
            <th>Datetime</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="label label-primary" id="datetime"></div>
            </td>
            <td>
              <label>Employee Name</label>
              <input type="text" ng-model="employeeName" />
            </td>
            <td>
              <label>Employee Age</label>
              <input type="number" ng-model="employeeAge" />
            </td>
          </tr>

        <span ng-repeat="employee in employees">
          <tr>
            <td>{{employee.timestamp}}</td>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.employeeAge}}</td>
          </tr>
        </span>

        </tbody>
      </table>

    </div>
    <script>
      function employeeCtrl($scope) {
        refresh = function() {
          $scope.employeeName = new Chance().name();
          $scope.employeeAge = new Chance().age();
        }
        $scope.employees = {};

        refresh();
        $scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");

        $scope.saveEmployee = function() {
          date = moment(new Date())
          dateStr = date.format('YYYY.MM.DD') + " @ " + date.format("LTS");
          $scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
          refresh();
        };

        $scope.myData.on('value', function(snapshot){
          $scope.employees = snapshot.val();
          $scope.$apply(); // temp. solution
        });

      };
    </script>
    <script>
      var datetime = null,  date = null;
      moment.locale('da');
      var update = function() {
        date = moment(new Date())
        dateStr = date.format('YYYY.MM.DD') + " @ " + date.format("LTS");
        datetime.html(dateStr);
      };

      $(document).ready(function() {
        datetime = $('#datetime')
        update();
        setInterval(update, 1000);
      });
    </script>
  </body>

</html>

http://plnkr.co/edit/x6fSbG?p=info

Answer 1

样式表中不存在glyphicons-ok，请改用glyphicon-ok。

对于您的条纹表，您正在生成所有oddRow s，它们不应与evenRow交替...

Answer 2

bootstrap-part中有一个拼写错误。将其更改为：

<span class="glyphicon glyphicon-ok"></span>

红利问题：只需删除包裹<span>：

<tbody> <tr> <td> <div class="label label-primary" id="datetime"></div> </td> <td> <label>Employee Name</label> <input type="text" ng-model="employeeName" /> </td> <td> <label>Employee Age</label> <input type="number" ng-model="employeeAge" /> </td> </tr> <tr ng-repeat="employee in employees" > <td>{{employee.timestamp}}</td> <td>{{employee.employeeName}}</td> <td>{{employee.employeeAge}}</td> </tr> </tbody>

Answer 3

关于按钮你有错误。变化：

<span class="glyphicon glyphicon-ok"></span>

关于包括角度。这个示例结构将起作用：

<!doctype html>
<html ng-app='project'>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <base href="/">
  </head>
  <body>
    <ng-view></ng-view>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="controllers/main_controller.js" type="text/javascript"></script>
  </body>
</html>

Bootstrap因AngularJS而失败（第一行不同）

3 个答案: