Angular JS控制器和路由问题..
stations.html
<div class="row" ng-controller="StationsCtrl">
<div class="col-md-5" ng-show="addFormShow">
<h3>Add Stations</h3>
<form ng-submit="addStation()">
<div class="form-group">
<label>Station Name</label>
<input type="text" class="form-control" placeholder="Station Name" ng-model="name">
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" placeholder="Date" ng-model="date"><span ng-bind="date"></span>
</div>
<div class="form-group">
<label>Rainfall</label>
<input type="text" class="form-control" placeholder="0.00" ng-model="rainfall">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-7">
<h3>Stations</h3>
<input type="text" ng-model="search">
<table class="table table-condensed">
<thead>
<tr>
<th>Station</th>
<th>Date</th>
<th>Rainfall</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="station in stations | filter:search ">
<td>{{ station.name }}</td>
<td>{{ station.date }}</td>
<td>{{ station.rainfall }}</td>
<td><a class="btn btn-danger btn-xs" ng-click="removeStation(station)">Delete</a>
</td>
<td><a class="btn btn-info btn-xs" ng-click="showEditForm(station)">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<form action="">
<select ng-options="station.name for station in stations" ng-model="selectOption" class="form-control"></select>
<br>
<br>
<div class="col-md-5">
<label for="">Rainfall: </label>{{ station.rainfall }} Rainfall:
<input type="text" class="form-control" placeholder="{{ selectOption.rainfall }}" value="{{ selectOption.rainfall }}" ngmodel="selectedRain">
</div>
<pre>{{selectOption | json}}</pre>
<h1>{{ selectOption.name }}</h1>
</form>
</div>
<div class="col-md-5" ng-show="editFormShow">
<h3>Edit Station</h3>
<form ng-submit="editStation()">
<div class="form-group">
<label>Station Name</label>
<input type="text" class="form-control" placeholder="Station Name" ng-model="name">
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" placeholder="Date" ng-model="date">
</div>
<div class="form-group">
<label>Rainfall</label>
<input type="text" class="form-control" placeholder="0.00" ng-model="rainfall">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<hr>
<hr>
<div class="row" ng-controller="CropsCtrl">
<div class="col-md-5" ng-show="addFormShow">
<h3>Add Crops</h3>
<form ng-submit="addCrop()">
<div class="form-group">
<label>Crop Name</label>
<input type="text" class="form-control" placeholder="Crop Name" ng-model="cname">
</div>
<div class="form-group">
<label>Planting Emergence</label>
<input type="text" class="form-control" placeholder="0.00" ng-model="plantingEmeregence">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-7">
<h3>Crops</h3>
<input type="text" ng-model="search">
<table class="table table-condensed">
<thead>
<tr>
<th>Crop</th>
<th>Planting Emergence</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="crop in crops | filter:search ">
<td>{{ station.cname }}</td>
<td>{{ station.plantingEmergence }}</td>
<td><a class="btn btn-danger btn-xs" ng-click="removeStation(station)">Delete</a>
</td>
<td><a class="btn btn-info btn-xs" ng-click="showEditForm(station)">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<form action="">
<select ng-options="station.name for station in stations" ng-model="selectOption1" class="form-control"></select>
<br>
<br>
<div class="col-md-5">
<label for="">Planting Emergence: </label>{{ crop.plantingEmergence }} Planting Emergence:
<input type="text" class="form-control" placeholder="{{ crop.plantingEmergence }}" value="{{ crop.plantingEmergence }}" ngmodel="selectedPE">
</div>
<pre>{{selectOption1 | json}}</pre>
<h1>{{ selectOption1.name }}</h1>
</form>
</div>
<div class="col-md-5" ng-show="editFormShow">
<h3>Edit Station</h3>
<form ng-submit="editStation()">
<div class="form-group">
<label>Station Name</label>
<input type="text" class="form-control" placeholder="Station Name" ng-model="name">
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" placeholder="Date" ng-model="date">
</div>
<div class="form-group">
<label>Rainfall</label>
<input type="text" class="form-control" placeholder="0.00" ng-model="rainfall">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
crops.js
angular.module('myApp.crops', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'stations/stations.html',
controller: 'CropsCtrl'
});
}])
.controller('CropsCtrl', ['$scope','$firebaseArray',function($scope,$firebaseArray) {
var ref = firebase.database().ref();
$scope.crops = $firebaseArray(ref);
$scope.addFormShow = true;
$scope.editFormShow = false;
$scope.showEditForm = function(crop){
$scope.addFormShow = false;
$scope.editFormShow = true;
$scope.id = crop.$id;
$scope.name = crop.name;
$scope.plantingEmergence = crop.plantingEmergence;
//$scope.rainfall = crop.rainfall;
}
$scope.addCrop = function(){
console.log("adding Crop");
$scope.crops.$add({
name : $scope.name,
plantingEmergence : $scope.plantingEmergence,
}).then(function(ref){
var id =ref.key;
console.log("added stations" +id);
$scope.name = '';
$scope.plantingEmergence = '';
});
}
$scope.removeCrop = function(crop){
$scope.crops.$remove(crop);
}
$scope.editCrop = function(){
var id = $scope.id;
var record = $scope.crops.$getRecord(id);
record.name = $scope.name;
record.plantingEmergence = $scope.plantingEmergence;
//save
$scope.crops.$save(record).then(function(ref){
console.log(ref.key);
});
$scope.name = '';
$scope.plantingEmergence = '';
}
}]);
stations.js
'use strict';
// Initialize Firebase
var config = {
apiKey: "AIzaSyCmLUPbeZ-ANNJcSXB2SbZsNcWa3CQtrwg",
authDomain: "stations-afb5a.firebaseapp.com",
databaseURL: "https://stations-afb5a.firebaseio.com",
storageBucket: "stations-afb5a.appspot.com",
};
firebase.initializeApp(config);
angular.module('myApp.stations', ['ngRoute','firebase'])
//angular.module('stationsApp', ['firebase']);
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'stations/stations.html',
controller: 'StationsCtrl'
});
}])
.controller('StationsCtrl', ['$scope','$firebaseArray',function($scope,$firebaseArray) {
var ref = firebase.database().ref();
$scope.stations = $firebaseArray(ref);
$scope.crops = $firebaseArray(ref);
$scope.addFormShow = true;
$scope.editFormShow = false;
$scope.showEditForm = function(station){
$scope.addFormShow = false;
$scope.editFormShow = true;
$scope.id = station.$id;
$scope.name = station.name;
$scope.date = station.date;
$scope.rainfall = station.rainfall;
}
$scope.ninja = ['when','where','how','ping'];
$scope.addStation = function(){
console.log("adding Station");
$scope.stations.$add({
name : $scope.name,
date : $scope.date,
rainfall : $scope.rainfall,
}).then(function(ref){
var id =ref.key;
console.log("added stations" +id);
$scope.name = '';
$scope.date = '';
$scope.rainfall = '';
});
}
$scope.removeStation = function(station){
$scope.stations.$remove(station);
}
$scope.editStation = function(){
var id = $scope.id;
var record = $scope.stations.$getRecord(id);
record.name = $scope.name;
record.dat = $scope.date;
record.rainfall = $scope.rainfall;
//save
$scope.stations.$save(record).then(function(ref){
console.log(ref.key);
});
$scope.name = '';
$scope.date = '';
$scope.rainfall = '';
}
}]);