1. 홈
  2. 질의 응답
  3. $ scope in AngularJS

$ scope in AngularJS

2016-07-21 5 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

'$ scope.mesProjets'의 데이터를 HTML에 표시하고 싶습니까? – 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"파일이 있습니다. 모든 그래프에 대해 .php 파일이 있습니다. 이제 파일 controller.js. 코드를 넣을 수 있습니까? – Lucile

+0

index.php의 내부 HTML –

+0

매우 죄송합니다. 그래프의 각 div에? 결국? 그 시작은? – Lucile

관련 문제

 관련 문제