Question

我使用bootstrap列创建了一个示例html页面。在列中，必须在特定位置插入文本（来自Firebase）。

例如：我想插入＆＃34; test＆＃34;在第3栏。

为此，我使用＆＃34; currentMessage＆＃34;创建了Firebase。字段和＆＃34;位置＆＃34;字段。

到目前为止，我使用javascript进行保存并显示来自Firebase的信息。另外，我在我的代码AngularJS中用来显示2条消息（只是为了学习......）。

这是我的index.html代码：

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

这是我的角色根文件：

   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";
    });

我需要想法/帮助如何实现此功能。（在我网站的特定位置插入文字）。

我认为有必要使用AngularJS，但我是新手而且我不知道如何才能做到这一点。

我试着制作一个控制器，看起来像这样：

root.controller('Ctrlocation', function($scope){

      if($scope.location=txtNewMessage2.value){
        $scope.message = txtNewMessage.value='';
      }
    });

但是，没有工作，我也不知道在我的索引中插入ng-controller的确切位置。

谢谢你的帮助！

在特定位置显示来自Firebase的信息

0 个答案: