javascript - 如何在 AngularJS 中为数组元素创建链接

Question

我是 AngularJS 新手。我想为数组中的元素创建链接。建议我一些代码或描述。

app.js

  app.controller('ItemsController', function($scope) {
  $scope.message = 'Items are displayed';
  $scope.items=['Appliances','Books','Cosmetics','Home & Furniture','Mens','women','kids'];

  });

items.html

 <div  ng-controller="ItemsController">

 <p><h1>Type a letter in the input field:</h1></p>

 <p><input type="text" ng-model="test"></p>
 {{message}}
 <ul><h2>
 <li ng-repeat="x in items| filter:test">
 {{ x }}
 </li>
 </h2></ul>

 </div>

Here是上述代码的示例输出。输出中显示的项目应该是链接。

Answer 1

如果您使用路由，则只需在 li 中创建一个 anchor 标记。

 <ul>
  <h2>
      <li ng-repeat="x in items| filter:test">
        <a href="#/details/{{x}}">{{x}}</a>
      </li>
 </h2>
</ul>

在路由配置中，只需处理与该项目相关的特定路由。就像您想显示该项目的详细信息一样。

myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/details/:item',{
    templateUrl:'partials/details.html',
    controller: 'DetailsController'
}).
otherwise({
    redirectTo : 'yourdefaultpath'
})

项目应在您的 Controller 中作为routeParam可用，然后您可以相应地显示您的数据。希望这会有所帮助。