Как использовать значение объекта в качестве атрибута href элемента с AngularJS?

0

AnglarJS newb здесь ищет ответы. У меня есть эти файлы, а также HTML и JSON файл, что я хочу сделать, это использовать ссылку, закрепленную как атрибут в json, и использовать ее в теге кнопки или ссылки.

index.html

<!DOCTYPE html>
<html>
<script src=          "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="templateApp" ng-controller="templateCtrl"> 

<ul>
<li ng-repeat="x in templates">
{{ x.title}}
</li>
<li ng-repeat="x in templates">
{{ x.limagen}}
</li>
<li ng-repeat="x in templates">
    {{x.lpagina}}
</li>

<a href ng-click="lpagina">
    <script>
            lpagina={{x.lpagina}};
    </script>

    Link</a>

</ul>

<img src="https://placeholdit.imgix.net/~text?  txtsize=25&txt=400%C3%97100&w=400&h=100"></img>

</div>

<script>
var app = angular.module('templateApp', []);
app.controller('templateCtrl', function($scope, $http) {
$http.get("obras.json")
.success(function (response) {$scope.templates = response.obra;});
});
</script>

</body>
</html>

И файл json (obras.json)

    {
   "obra": [
       {
           "title": "Sample Text",
           "limagen": "http://placehold.it/350x150",
           "lpagina": "http://stackoverflow.com/questions/25335140/creating-    a-button-link-with-json-params"
       }
   ]

}

Спасибо за любую помощь, которую вы можете мне дать!

  • 0
    Я начинаю свои комментарии снова, потому что я не понимаю, чего вы пытаетесь достичь. Пожалуйста, обновите ваш вопрос с примером окончательного HTML, который вы хотите. Здесь есть несколько проблем, начиная с нечетного скрипта внутри якоря.
  • 0
    Я хочу использовать значение lpagina для json в кнопке или href в html, то, что я сделал с тегом <a href>, оказалось неудачным тестом
Показать ещё 2 комментария
Теги:

1 ответ

2
Лучший ответ

Угловой позволяет {{ }} внутри тегов. Вам также не нужно писать это как скрипт, поскольку это всего лишь якорный тег.

<a href ng-click="lpagina">
  <script>
        lpagina={{x.lpagina}};
  </script>

Link</a>

становится:

<a href="{{x.lpagina}}">Link</a>

демонстрация

Поделиться
  • 0
    У меня была готова скрипка, поэтому я добавил ее сюда. Обратите внимание, что я переместил ng-repeat в список.
  • 0
    А остальная часть кода остается прежней? Просто поместите обновленный тег ref в div? Спасибо за ответ!
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню