如何在 angular 中整理列表

Question

这是我第一次post在 Whosebug 上提问，如果格式不正确，非常抱歉。

我一直运行遇到 angular 中的相同问题，我确信有一种非常简单的方法可以解决它，但出于某种原因我无法弄清楚。下面我会post举例说明，

<div class="jmc-navbar-content" ng-if="!vm.isHidden" ng-swipe-up="vm.toggleNav()">
<!-- contains the navigation/page links -->
<ul class="jmc-navbar-menu">
  <li class="active"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#home">Home</a></li>
  <li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#portfolio">Portfolio</a></li>
  <li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#about">About</a></li>
  <li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#contact">Contact</a></li>
  <li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#/">View source on GitHub</a></li>
</ul>
</div>

虽然这可行，但我不喜欢为所有需要具有相同类和属性的 <a> 标签重复自己。我可以想到多种方法来使用 javascript 执行此操作，但它们看起来都有点 'hack-y'。在 Angular 或 Javascript 中有什么简单的方法可以做到这一点吗？

感谢您抽出宝贵的时间回复，欢迎任何建设性的批评。

Answer 1

首先，您可以使用路径和 占位符 （显示）创建 objects 的 array :

然后你可以使用ngRepeat指令：

<li ng-class="{ 'active': $first }" ng-repeat="link in vm.links"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="{{link.path}}">{{link.display}}</a></li>

看到它工作:

(function() {
  'use strict';
  
  angular
    .module("app", [])
    .controller('MainCtrl', MainCtrl);

  function MainCtrl() {
    var vm = this;
    vm.links = [
      {
        "path": "#home", "display": "Home"
      },
      {
        "path": "#portfolio", "display": "Portfolio"
      },
      {
        "path": "#contact", "display": "Contact"
      },
      {
        "path": "#about", "display": "About"
      },
      {
        "path": "#/", "display": "View source on GitHub"
      }
    ];
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl as vm">
  <li ng-class="{ 'active': $first }" ng-repeat="link in vm.links"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="{{link.path}}">{{link.display}}</a></li>
</body>

</html>

希望对您有所帮助。

Answer 2

在你的 html 中使用 ng-repeat

并且由于您的第一个 li 具有 class 作为 'active'，您需要使用 $index

<div ng-repeat = 'aVal in aVals'>
     <li ng:class="{true:'active', false:''}[$index == 0]"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="aVal.hrefVal">{{aVal.name}}</a></li>
</div>

并且在 angularController 中

var app = angular.module("myApp", []);

angular
.module('myApp')
.controller('myCtrl', ['$scope',
    function ($scope) {
         $scope.aVals= [
            { hrefVal: '#home', name='Home'},
            { hrefVal: '#portfolio', name='Protfolio'},
             // so on
        ];

    }]);

Answer 3

yes ,you can use ng-repeat.I think it satisfy your problem. and If then href's are states then angular provide ui-sref. This way you can implement.
Can you check this attachement .
     "http://jsfiddle.net/soumyagangamwar/789Ks/77/"

 If it satisfy you requirement  then don't forget to vote.

如何在 angular 中整理列表

How to DRY up list in angular

javascript

html-lists

angularjs

angular-ng-if