【发布时间】：2016-03-18 07:49:55
【问题描述】：
试图同时学习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
现在应该在保存按钮上出现一个条纹表格和一个字形图标。但没有。任何帮助将不胜感激。
额外的角表行问题
我首先尝试将输入部分作为第一行的一部分并进行角度 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>
【问题讨论】：
-
建议：删除 jQuery 直到你明白原因。否则接受它会阻碍你。另请阅读：stackoverflow.com/questions/14994391/…
-
其实我希望避免使用 jQuery，但只是没有那么强大的角度来制作这样的时钟..
-
如果您不需要 jquery，请删除它或在所有脚本之前加载它。尝试使用“角度引导”angular-ui.github.io/bootstrap
-
@dfsq 我发现这个stackoverflow.com/questions/23383233/… 可以工作..
标签： angularjs twitter-bootstrap