1. дома
  2. Вопрос и ответ
  3. $ scope в AngularJS

$ scope в AngularJS

2016-07-21 4 views
-2

Я реализую графический интерфейс. Чтобы сделать эти графики, нам нужны данные. Итак, я сделал файл, содержащий мои ДАННЫЕ, с $ объемом в контроллере:

'use strict' 
angular.module('gestionPrj') 
.controller('ProjetsCtrl',function($scope) 
{ 
    $scope.mesProjets=[ 
     {id:1, name_folder:'aeff', date:'2010', country:'Germany', quantity:256}, 
     {id:2, name_folder:'Technologies', date:'2012',country:'Russia', quantity:21}, 
     {id:3, name_folder:'Déosciences',date:'1989', country:'France', quantity:660}, 
     {id:4, name_folder:'Mises à jour', date:'2000', country:'China', quantity:47}, 
    ]; 
    $scope.filtreProjet=""; 
});

Вот файл, который вызывает другие файлы, содержащие графику. Это главный файл для построения интерфейса:

<div style="width:100%;height:100%"> 
<div id="titre">GRAPHICAL SEARCH </div> 
    <div class="mobile-nav"> 

     <ul> 
      <li><a id="outside" class="open-menu" href="#"><i class="ion ion-grid"></i></a> 
      </li> 
     </ul> 

    </div> 
     <div id="page-wrapper"> 
      <div class="row" ng-controller="PerformanceDataController"> 
       <div id="graph1"> <!--lm modif : avant c'était : <div class="col-lg-3 col-md-6">--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Folder filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset1" onClick="reset_folder_filter()" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 
           </div> 
          </div> 
         </div> 
          <div class="panel-body"> 

           <!--<div class="huge" style="min-width:90%;max-width: 90%" >--> 
           <!--<IFRAME src="var/www/html/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/js/testBubble.php" style="width:90%; height:300px"></IFRAME>--> 
           <!--<IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix//tools/Specific_Studies/tests/testBubble.php" scrolling="no" frameborder="0" style="width:90%; height:300px"></IFRAME>--> 
           <IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix//tools/Specific_Studies/tests/testBubbleessai.php" scrolling="no" frameborder="0" style="width:90%; height:300px"></IFRAME> 
           <!--</div>--> 
           <div class="clearfix"></div> 
          </div> 
        </div> 

       </div> 

       <div id="graph2"> <!--lm modif : avant c'était <div class="col-lg-3 col-md-6">--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Date filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset2" onClick="reset_date_filter()" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 
           </div> 
          </div> 
         </div> 
          <div class="panel-body"> 
           <!--<IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/SitePointTutorialFinalAngularClient-masterTEST/barchart/barchart.html" style="width:90%; height:300px" scrolling="no" frameborder="0"></IFRAME>--> 
           <div id="container" style="width:90%; height:300px" scrolling="no" frameborder="0"></div> 
           <!--<div id="chart-container2" style="min-width:90%;max-width: 90%"></div> --> <!--lm modif : avant c'était <div class="huge">{{netInData}}</div>--><!--lm modif : chart-container se trouve dans "controller.js", c'est pour faire le barchart--> 
           <div class="clearfix"></div> 
           <!--<div> <h5 style="color:rgb(220,0,0);font-size:12px;margin-bottom:0px;margin-top:0px"><b><i>To activate a filter, click the legend below the graph</b></i></h5></div>--> 
           <!--lm modif : début pour mettre les curseurs--> 
           <form oninput="output1.value=parseInt(slider1.value)+1960;output2.value=parseInt(slider2.value)+1960"> 
            <input type="range" name="slider1" class="mySlider" min="0" max="56" value="0" /> 
            <output name="output1" id="output1" for="slider1" style="font-size:10px;padding-top:0px;text-align:left">1960</output> 
            <br /> 
            <input type="range" name="slider2" class="mySlider" min="0" max="56" value="56" /> 
            <output name="output2" id="output2" for="slider2" style="font-size:10px;padding-top:0px;text-align:right">2016</output> 
           </form> 
           <!--lm modif : fin pour mettre les curseurs--> 
          </div> 
        </div> 
       </div> 

       <div id="graph3"> <!--lm modif : avant c'était <div class="col-lg-3 col-md-6">--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Expression filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset3" onClick="reset_expression_filter()" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 
           </div> 
          </div> 
         </div> 
          <div class="panel-body" id="test" > 
           <IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/SitePointTutorialFinalAngularClient-masterTEST/treemap/Jit/Examples/Treemap/example1.html" style="width:90%; height:300px" scrolling="no" frameborder="0"></IFRAME> 
           <div class="clearfix"></div> 
          </div> 

        </div> 

       </div> 

       <div id="graph4"> <!--lm modif : <div class="col-lg-3 col-md-6">--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Keyword filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset4" onClick="reset_keyword_filter()" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div>         
           </div> 
          </div> 
         </div> 
          <div class="panel-body" > 
           <IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/SitePointTutorialFinalAngularClient-masterTEST/expression/index.html" style="width:90%; height:300px" scrolling="no" frameborder="0"></IFRAME> 

            <div class="clearfix"></div> 
            </div> 

        </div> 

       </div> 
      </div> 
      <!-- /.row --> 


      <!-- /.row --> 
      <div class="row"> 
       <div id="graph5"> <!--lm modif : avant c'était <div class="col-lg-8">--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Country filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset5" onClick="reset_country_filter()" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 

           </div> 
          </div> 
         </div> 
         <!-- /.panel-heading --> 

         <div class="panel-body"> 
         <div id="chart-container5" style="min-width:90%;max-width: 90%;"></div> 
         <div class="clearfix"></div> 
          <!--lm modif : avant c'était <div class="huge">{{netInData}}</div>--><!--lm modif : chart-container se trouve dans "controller.js", c'est pour faire le barchart--> 
         <!--lm modif : pour faire une liste déroulante de tous les pays :--> 
          <select id="liste_déroulante" class=form-control style="width:auto;font-size: 10px;height:auto; margin-left:60px"> 
           <option value=Choose>---Choose a continent or a country---</option> 
           <option value=Continent>---Choose a continent---</option> 
           <option id="continent1" value=Afrique>Afrique</option> 
           <option id="continent2" value=Amérique>Amérique</option> 
           <option id="continent3" value=Asie>Asie</option> 
           <option id="continent4" value=Europe>Europe</option> 
           <option id="continent5" value=Océanie>Océanie</option> 
           <option value=Country>---Choose a country---</option> 
           <option id="Pays1" value=Arizona>Arizona</option> 
           <option id="Pays2" value=Utha>Utha</option> 
           <option id="Pays3" value=France>France</option> 
           <option id="Pays4" value=Allemagne>Allemagne</option> 
           <option id="Pays5" value=Alaska>Alaska</option> 
           <option id="Pays6" value=Indiana>Indiana</option> 
           <option id="Pays7" value=Angleterre>République Démocratique du Congo</option> 
          </select> 
         </div> 


         <!-- /.panel-body --> 
        </div> 

        </div> 
        <!-- /.panel --> 
       <div id="graph6"> <!--lm modif : avant il n'y avait rien--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Author filter 
            <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset6" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 
           </div> 
          </div> 

         </div> 

         <div class="panel-body"> 
          <IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/SitePointTutorialFinalAngularClient-masterTEST/tableau.html" style="width:90%; height:300px" scrolling="no" frameborder="0" ></IFRAME> 
         </div> 
         <!-- /.panel-body --> 
        </div> 

</div> 
        <!-- /.panel --> 
       <div id="graph7"> <!--lm modif : avant il n'y avait rien--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="huge">{{currentRamNumber}}</div> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></a></div> 
            <div class="center" style="font-size: 15px">Organization filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset7" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 
           </div> 
          </div> 
         </div> 

         <!-- /.panel-heading --> 
         <div class="panel-body"> 
           <IFRAME src="http://192.168.1.182/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/SitePointTutorialFinalAngularClient-masterTEST/tableauorganizations.html" style="width:90%; height:300px" scrolling="no" frameborder="0" ></IFRAME> 

           <div class="clearfix"></div> 


         </div> 
         <!-- /.panel-body --> 
        </div> 

        <!-- /.panel --> 
       <!-- /.col-lg-8 --> 
       </div> 
       <!-- /.col-lg-8 --> 

       <div id="graph8"> <!--lm modif : avant c'était <div class="col-lg-4">--> 
        <div class="panel panel-dashboard"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-12 text-center"> 
            <div class="huge">{{currentRamNumber}}</div> 
            <div class="controls left"></div> 
            <div class="controls right"><a class="remove"></i></a></div> 
            <div class="center" style="font-size: 15px">Collaboration filter 
              <label><!--<input type="checkbox" id="cbox2" value="checkbox2" style="right:150%">--><input type="image" src="refresh.png" id="reset8" onClick="reset_collaboration_filter()" value="Reset" href="lien"> 
              </label> <!--lm modif : pour mettre une checkbox et un petit bouton reset en dessous du graphique--> 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="panel-body"> 
          <div ng-controller="PerformanceDataController"> 
           <iframe src="http://192.168.1.182/interfaceUnique/ipMetrix/tools/Specific_Studies/tests/SitePointTutorialFinalAngularClient-masterTEST/networkMika/index.html" svg="svgcontainer" style="width:90%; height:300px" scrolling="no" frameborder="1"></iframe> 
           <!--<img src="network.png" style="min-width:90%;max-width: 90%"> <!--lm modif : avant c'était <pie-chart data="data" options="options"></pie-chart>--> 
          </div> 
         </div> 
         <!-- /.panel-body --> 
        </div> 



         </div> 

         <!-- /.panel-body --> 
        </div> 
        <!-- /.panel --> 


        </div> 
       <!-- /.col-lg-4 --> 

      </div> 

      <!-- /.row --> 
     </div> 

     <!-- /#page-wrapper --> 

    </div> 
</div>

Теперь, строить графики, мы должны вызвать $ простор для создания каждого графика. Как это сделать?

источник

2016-07-21 Lucile

+0

Вы хотите показать в своем HTML данные из '$ scope.mesProjets'? – Mistalis

+0

Эта огромная часть html-кода выглядит как прикрытие. ЧТО ТЫ СДЕЛАЛИ? –

+0

да на самом деле я хочу, чтобы мои данные в каждом файле, который создает диаграмму – Lucile

ответ

0

Вы должны добавить контроллер ProjetsCtrl на ваш взгляд, чтобы вы могли получить доступ к привязке данных к контроллеру ProjetsCtrl, а затем вы можете использовать директиву ng-repeat следующим образом.

<div ng-controller = 'ProjetsCtrl'> 
    <div ng-repeat = 'mesProjet in mesProjets'> 
     <div>{{mesProjet.id}}</div> 
     <div>{{mesProjet.name}}</div> 
     <div>{{mesProjet.country}}</div> 
     <div>{{mesProjet.date}}</div> 
    </div> 
</div>

Похоже, вы очень новичок в angularjs. Вы можете перейти по этой ссылке https://www.youtube.com/watch?v=zKkUN-mJtPQ&list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl, чтобы начать работу с angularjs

источник

2016-07-21 10:24:20

+0

Спасибо за ссылку! У меня есть файл «Index.php», который является рендерингом графического интерфейса. У меня есть файл "controller.js", который содержит все графики, сделанные с помощью fusioncharts и highcharts. У меня есть файлы .php для всех графиков. И теперь файл controller.js. Можно ли разместить свой код? – Lucile

+0

Внутри html в index.php –

+0

Мне очень жаль, но в коде есть код? В каждом div графа? В конце? В начале? – Lucile

Смежные вопросы

 Смежные вопросы