Блог

Главная - Вопросы по программированию - как отобразить динамический контент на одной странице с помощью angularjs

как отобразить динамический контент на одной странице с помощью angularjs

#html #angularjs #angularjs-routing

#HTML #angularjs #angularjs-маршрутизация

Вопрос:

Я новичок в AngularJS и в stackoverflow тоже, надеюсь, здесь найдется решение моей проблемы. Я пытаюсь отобразить детали эксперимента (на той же странице) на основе названия эксперимента, которое поступает с URL-адреса при нажатии на название (index.html ). Здесь проблема в том, что когда я нажимаю на название эксперимента, оно отображается в URL, но не может получить его подробную информацию.Кто-нибудь может помочь мне решить.Вот мой код.

//эксперименты.json

[ {«sl_no»: «1», «name»: «Сумматоры BCD», «objective» : «Речь идет о разработке обратимых сумматоров BCD». }, {«sl_no»: «2», «name»: «Онлайн-банкинг», «objective» : «Речь идет об онлайн-транзакциях».} ]

//index.html

 <!DOCTYPE html>

 <html ng-app="experimentApp">

   <head>

   <script src="js/angular.min.js"></script>
   <script src="js/angular-route.min.js"></script>
   <script src="js/controller.js"></script>
 </head>

 <body>
    <div id="main">
     <nav class="navbar navbar-default">
      <div class="container">
       <div class="navbar-header">
        <a class="navbar-brand" href="/">Angular Routing Example</a>
       </div>
       <br>
       <ul class="nav navbar-nav navbar-left">

       <div>

         <ul ng-controller="ExperimentListCtrl">
          <li ng-repeat="experiment in experiments">

           <a href="#/{{experiment.name | encodeURI}}">

              <strong>{{experiment.sl_no}}. {{experiment.name}}</strong><br>
             </a>
          </li>
         </ul>
           <div ng-include="experiment-detail.html"></div>

      </div>
     </ul>
    </div>  
   </nav>
  </div>  
 </body>
</html>

//controller.js

// создайте модуль и назовите его experimentApp var experimentApp = angular.module(‘experimentApp’, [‘ngRoute’]);

 // configure our routes
  experimentApp.config(function($routeProvider) {
    $routeProvider.
     when('/:experimentName', {
            templateUrl : 'experiment-detail.html',
            controller  : 'ExperimentDetailCtrl'
        }).
      otherwise({
        redirectTo: '/'
      });
  });

experimentApp.factory(‘эксперименты’, функция ($ http){

     function getData(callback){
      $http({
        method: 'GET',
        url: 'experiments.json',
        cache: true
      }).success(callback);
    }

    return {
      list: getData,
      find: function(name, callback){
        getData(function(data) {
          var experiment= data.filter(function(entry){
            return entry.name === name;
          })[0];
          callback(experiment);
        });
      }
    };
  });

experimentApp.controller('ExperimentListCtrl', function ($scope, experiments){
    experiments.list(function(experiments) {
      $scope.experiments = experiments;
    });
  });

  experimentApp.controller('ExperimentDetailCtrl', function ($scope, $routeParams,
                                                              experiments){
    experiments.find($routeParams.experimentName, function(experiment) {
      $scope.experiment = experiment;
    });
  });

experimentApp.filter('encodeURI', function(){
    return window.encodeURI;
  });

//experiment-detail.html

  <div>
     <strong>{{experiment.sl_no}}. {{experiment.name}}</strong><br>
       </br></br>

     <strong>Aim :</strong>{{experiment.objective}}      
 </div>

Ответ №1:

Вам нужно закодировать experiment.name только, поэтому измените :

 experimentApp.filter('encodeURI', function(){
    return window.encodeURI;
});

Для : 

 experimentApp.filter('encodeURI', function(stringToEncode){
    return encodeUri(stringToEncode);
});

Комментарии:

1. У меня это не работает.:-( если я внес это изменение, сама первая страница не работает. Спасибо за ответ.

2. Что вы подразумеваете под первой страницей? вы пытаетесь показать оба experiment.list.html и experiment.details.html ?

3. Если вы хотите отобразить оба, вам следует включить шаблон ng-include или использовать ui.router из Angular UI. Что вы действительно хотите показать, так это вложенное состояние / страницу, и это нелегко достичь с помощью ngRoute

4. да, точно. Я получаю список названий экспериментов в experiment-list.html . Итак, когда я нажимаю на имя на этой странице, я хочу отобразить соответствующие сведения без каких-либо изменений.

5. Где я должен использовать ng-include? Не могли бы вы мне, пожалуйста, помочь?