如何以角度干燥列表
[英]How to DRY up list in angular
問題描述
這是我第一次在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中執行此操作？
感謝您抽出寶貴時間回復，我們對任何建設性的批評表示贊賞。
3 個解決方案
解決方案1
2 已采納 2016-08-07 05:57:19
首先，您可以使用路徑和占位符 （顯示）創建一個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>
我希望它有所幫助。
解決方案2
2 2016-08-07 06:06:41
在你的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
];
}]);
解決方案3
-2 2016-08-07 07:36:46
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干燥HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.