问AngularJS菜单-
EN

Stack Overflow用户

提问于 2014-08-20 01:05:06

回答 1查看 84关注 0票数 0

我正在学习AngularJS，我终于得到了一些有用的东西(我实现了一个搜索功能)

现在，我正尝试基于我在AngularJS中的搜索代码来构建一个菜单。

一切正常，但我不得不一遍又一遍地重复相同的代码：

ng-model="searchText" ng-click="search('link-6')"

下面是我的代码：

<!DOCTYPE html>                                      
<html ng-app="casz">                                         
<head>     
  <title></title>                               
  <meta charset="utf-8">
</head>             
<body>                                                                                

<section ng-controller="SearchCtrl">              
  <nav>  
      <a href="/link-1/" ng-model="searchText" ng-click="search('link-1')" >link-1</a>
      <a href="/test/" ng-model="searchText" ng-click="search('test')" >test</a>
      <a href="/link/" ng-model="searchText" ng-click="search('link')" >link</a>
      <a href="/link-4/" ng-model="searchText" ng-click="search('link-4')" >link-4</a>
      <a href="/stackoverflow/" ng-model="searchText" ng-click="search('stackoverflow')" >stackoverflow</a>
      <a href="/link-6/" ng-model="searchText" ng-click="search('link-6')" >link-6</a>
      <a href="/link-abc/" ng-model="searchText" ng-click="search('link-abc')" >link-abc</a>
      <a href="/link-8/" ng-model="searchText" ng-click="search('link-8')" >link-8</a>
      <a href="/zzz/" ng-model="searchText" ng-click="search('zzz-9')" >zzz</a>

  </nav>

  <article ng-repeat="d in data">                 
      <h3>{{d.title}}</h3> 
      <p>{{d.description}}</p> 
  </article> 
</section>

<!-- JS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>                                                                 
<script type="text/javascript">

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

app.controller("SearchCtrl", function($scope, $http) {
$scope.search = function(p) {
    $http({
        cache: false,
        dataType: 'json',
        url: '/getdata.php?',
        method: "POST",
        data: 'title=' + p,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data, status, headers, config) {
        $scope.status = status;
        $scope.data = data;
    }).error(function (data, status, headers, config) {
        $scope.data = data || "Request failed";
        $scope.status = status;
    });
};
});


</script>                                 

</body>                                                                               
</html>

有没有办法不重复这段代码"ng-model="searchText“ng-click="search('link-6')”并使用数据--或者类似的东西？

我编辑了我的问题===

angularjs

回答 1

Stack Overflow用户

发布于 2014-08-20 01:20:13

您可以创建链接数组并通过ng-repeat单独显示它们

<a ng-repeat="link in links" 
  ng-href="/link-{{link}}/" 
  ng-model="searchText" 
  ng-click="search('link-' + link)" >
  link-{{link}}</a>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25389140

复制

相似问题

问AngularJS菜单-
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS菜单-EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS菜单-
EN