javascript - Show information from Firebase at the specific position -
i made sample html page bootstrap column. in column it's necessary insert text (from firebase) @ specific position.
for example: want insert "test" @ column 3.
for that, create firebase "currentmessage" field , "location" field.
until now, use javascript save , show information firebase. also, used in code angularjs show 2 messages (just learn...).
here index.html code:
<!doctype html> <html ng-app="root"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap grid</title> <!-- bootstrap --> <link href="bootstrap.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> <!--for angular js--> <script src="root.js"></script> <script src="services.js"></script> </head> <!--end angularjs --> </head> <body> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div class="container-fluid"> <div class="header"> <div class="row"> <div ng-app="root"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" > <div ng-controller="ctrl1"><center>{{message}}</center></div> </div> <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 blue9" > <div ng-controller="ctrl2"><center>{{message}}</center></div></div> </div> </div> </div> <div class="content"> <div class="top-content"> <div class="row"> <div ng-app="root"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" ><div ng-controller="ctrlocation">{{message}}</div></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> </div> </div> </div> </div> <div class="content"> <div class="top-content"> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> </div> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> <div class="col-xs-6 col-sm-9 col-md-6 col-lg-6 blue" >.col-md-6</div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> </div> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div> </div> </div> </div> <div class="bottom-content"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 red12" > <div id="lblcurrentmessage" class="text-center"></div> </div></div> </div> <br><br> <div class="form-group"> <input type="text" id="txtnewmessage" cass="form-control"> <button id="btnupdatemessage" class="btn btn-primary">add text</button> <br><br> <input type="text" id="txtnewmessage2" cass="form-control"> <button id="btnupdatelocation" class="btn btn-primary">add location</button> </div> <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script> <script> var lblcurrentmessage = document.getelementbyid('lblcurrentmessage'), txtnewmessage = document.getelementbyid('txtnewmessage'), txtnewmessage2 = document.getelementbyid('txtnewmessage2'), btnupdatemessage = document.getelementbyid('btnupdatemessage'); btnupdatelocation = document.getelementbyid('btnupdatelocation'); rootref = new firebase('https://web-quickstart-8326d.firebaseio.com/'), currentmessageref = rootref.child('currentmessage'); locationref = rootref.child('location') btnupdatemessage.addeventlistener('click', function(){ currentmessageref.set(txtnewmessage.value); txtnewmessage.value=''; }); btnupdatelocation.addeventlistener('click', function(){ locationref.set(txtnewmessage2.value); txtnewmessage2.value=''; }); currentmessageref.on('value', function(snapshot){ txtnewmessage.value=''; }); currentmessageref.on('value',function(snapshot){ lblcurrentmessage.innertext = snapshot.val(); }); </script> <!--angularjs scripts --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script> <script src="root.js"></script> <script src="services.js"></script> <!--end angularjs --> </body> </html> and here root files angular:
var root = angular.module('root', []); root.controller('ctrl1', function ($scope) { $scope.message = "eu sunt coloana 3"; }); root.controller('ctrl2', function ($scope) { $scope.message = "eu sunt coloana9"; }); i need idea/help how can implement feature. (to insert text, @ specific position in website).
i think it's necessary use angularjs that, i'm novice , don't have idea how can make that.
i tried make controller, that:
root.controller('ctrlocation', function($scope){ if($scope.location=txtnewmessage2.value){ $scope.message = txtnewmessage.value=''; } }); but, didn't work , don't know it's necessary insert ng-controller in index.
thank help!
Comments
Post a Comment