Question

我是AngularJs的新手，也是stackoverflow的新手，希望能在这里找到解决我问题的方法。我试图根据点击名称（index.html）时来自URL的实验名称显示实验的详细信息（在同一页面中）。问题是，当我点击实验名称时，它会进入URL但无法获取其详细信息。任何人都可以帮我解决。这是我的代码。

// experiments.json

[ { ＆＃34; sl_no＆＃34; ：＆＃34; 1＆＃34;，＆＃34;名称＆＃34; ：＆＃34; BCD加法器＆＃34;，＆＃34;目标＆＃34; ：＆＃34;它涉及可逆BCD加法器的设计。＆＃34; }， {＆＃34; sl_no＆＃34; ：＆＃34; 2＆＃34;，＆＃34;名称＆＃34; ：＆＃34;网上银行＆＃34;，＆＃34;目标＆＃34; ：＆＃34;它处理在线交易。＆＃34;} ]

// 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（＆＃39; experimentApp＆＃39;，[＆＃39; ngRoute＆＃39;]）;

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

experimentApp.factory（＆＃39; experiment＆＃39;，function（$ 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;
  });

//实验-detail.html

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

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

Answer 1

您只需对experiment.name进行编码，因此请更改：

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

到：

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

如何使用angularjs在单个页面中显示动态内容

1 个答案: