如何使用AngularJS将对象值用作元素的href属性?

时间:2015-09-25 16:53:20

标签: html json angularjs

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"
       }
   ]

}

感谢你们给我的任何帮助!

1 个答案:

答案 0 :(得分:2)

Angular也允许标签内部{{ }}。您也不需要将其写为脚本,因为它只是一个锚标记。

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

Link</a>

变为:

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

<强> Demo