如何以角度干燥列表答案

【问题标题】：How to DRY up list in angular如何以角度干燥列表
【发布时间】：2016-08-07 05:35:54
【问题描述】：

这是我第一次在 stackoverflow 上发布问题，如果格式不正确，请见谅。

我一直在角度遇到同样的问题，我确信有一种非常简单的方法可以解决它，但由于某种原因我无法弄清楚。我将在下面发布一个示例并给出解释。

<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 中是否有任何简单的方法可以做到这一点？

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

【问题讨论】：

你为什么不使用 ng-repeat ？
@JesseMcintosh 你检查我的答案了吗？你不是用controller-as-syntax吗？
是的，谢谢您的回复，您说得对，我使用的是controller-as。

标签： javascript angularjs html-lists angular-ng-if

【解决方案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>

希望对你有帮助。

【讨论】：

我认为您不需要将 {{ }} 语法放入 ng-href 吗？应该是直接ng-href='link.path'
谢谢，您建议我将vm.links 对象放入服务中还是有其他方法？我确信稍后我将需要在另一个控制器中使用该对象。
如果你会在另一个控制器中使用它，是的，最好将它存储在服务中..

【解决方案2】：

在你的 html 中使用 ng-repeat

由于您的第一个 li 的类为“活动”，因此您需要使用 $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
        ];

    }]);

【讨论】：

我很高兴它帮助了@Jesse

【解决方案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.

【讨论】：