0

Как отобразить имена в объекте без значений? Т.е., в теге <a> должно быть так, но только с помощью Ангуляра:

<a href="https://www.youtube.com/watch?v=G33qMDAnQEY">leraLynnNewSong</a>

Html:

<!DOCTYPE html>
<html ng-app="store">
<head>
     <meta charset="utf-8">
     <script src="js\angular.min.js"></script> <!-- AngularJS v1.4.8 -->
     <script src="js\app1.js"></script>
</head>
<body>
    <div ng-controller="HrefController as store">
        <ul>
            <li ng-repeat="anchor in store.anchors"><a href="{{anchor}}">{{anchor[0]}}</a></li>
        </ul>
    </div>
</body>
</html>

app1.js:

(function(){
var app = angular.module('store', []);

app.controller('HrefController', function(){
    this.anchors = youtubeHrefs;
});

var youtubeHrefs = {
    leraLynnNewSong: "https://www.youtube.com/watch?v=G33qMDAnQEY",
    leraLynnMyLeastfavoritelife: "https://www.youtube.com/watch?v=-2Cc1c3Bur0"
};

Ссылка в атрибут добавляется (работает), но как вывести названия в объекте и связать их между собой?

2 ответа 2

2

ng-repeat так же работает и с объектами, поэтому не нужно дополнительных обработок.

var app = angular.module('store', []);

app.controller('HrefController', function() {
  this.anchors = youtubeHrefs;
});

var youtubeHrefs = {
  leraLynnNewSong: "https://www.youtube.com/watch?v=G33qMDAnQEY",
  leraLynnMyLeastfavoritelife: "https://www.youtube.com/watch?v=-2Cc1c3Bur0"
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="store" ng-controller="HrefController as store">
  <ul>
    <li ng-repeat="(name, anchor) in store.anchors"><a href="{{anchor}}">{{name}}</a>
    </li>
  </ul>
</div>

1

Если Вы планируете использовать только последние версии браузера, Вы можете получить список ключей(имен) вашего объекта и проходить в в ангуларе по списку имен используя Object.keys().

<body ng-controller="HrefController as store">
    <ul>
        <li ng-repeat="name in store.keys"><a href="{{store.anchors[name]}}">{{ name }}</a></li>
    </ul>
</body>

JS:

var app = angular.module('store', []);


var youtubeHrefs = {
      leraLynnNewSong: "https://www.youtube.com/watch?v=G33qMDAnQEY",
      leraLynnMyLeastfavoritelife: "https://www.youtube.com/watch?v=-2Cc1c3Bur0"
};


app.controller('HrefController', function(){
    this.anchors = youtubeHrefs;
    this.keys = Object.keys(this.anchors);
});

https://plnkr.co/edit/1BuOANiYvZ4SD8Amt2Hv?p=preview

Если Вам нужна поддержка всех браузеров, то Вам небходимо сначала получить список ключей. Например так:

this.keys = [];
for(var k in this.keys) this.keys.push(k);
1
  • То что нужно, спасибо!
    – Volod
    29 янв 2016 в 21:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.