Bootstrap fails with AngularJS (and having first row being different)

Question

Trying to learn AngularJS and a hole bunch of frameworks at the same time (doomed to go wrong).

I got this far, but have some issues with the bootstrap not working..

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

Now there should appear a striped table and a glyphicon at the save button.. But there is not.. Any help would be appreciated.

Bonus angular table row questions

I first tried to make the input part of the first row and the do a angular for-loop, but somehow this doesn't work..

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

Advice: remove jQuery until you understand why. Otherwise accept that it will hold you back. Also read: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 — dfsq, Mar 18 '16 at 07:52
Actually I wish to avoid jQuery, but just aren't that strong with angular to make a clock like this.. — Norfeldt, Mar 18 '16 at 07:54
remove jquery if you don't need it or load it before all the script. try with 'angular bootstrap' https://angular-ui.github.io/bootstrap/ — AlainIb, Mar 18 '16 at 07:54
@dfsq I found this one http://stackoverflow.com/questions/23383233/how-to-make-a-ticking-clock-time-in-angularjs-and-html would work.. — Norfeldt, Mar 18 '16 at 07:57

score 3 · Accepted Answer · answered Mar 18 '16 at 08:05

There is a typo in the bootstrap-part. Change it to:

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

Bonus-question: Simply remove the wrapping <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>

Wow! That was quick. Thank you very much! – Norfeldt Mar 18 '16 at 08:20 — Norfeldt, Mar 18 '16 at 08:20

score 1 · Answer 2 · answered Mar 18 '16 at 08:05

1

The glyphicons-ok doesn't exist in your stylesheets, use glyphicon-ok instead.

For your striped table, you're generating all oddRows, shouldn't they be alternating with evenRows...

answered Mar 18 '16 at 08:05

Kevin Sandow

4,003
1
20
33

score 0 · Answer 3 · answered Mar 18 '16 at 07:57

About button u have mistake there. Change:

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

About include angular. This example structure will work:

<!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 fails with AngularJS (and having first row being different)

3 Answers3