AngularJS menu -

Question

I am learning AngularJS and I finally got something to work (I implemented a search feature )

Now, I am trying to build a menu based on my search code in AngularJS.

everything works BUT I have to repeat the same code over and over:

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

Here's my code:

<!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>

Is there a way to NOT repeat this code "ng-model="searchText" ng-click="search('link-6')" and use data- or something like that?

=== i edited my question ===

What's the point of ng-model="searchText" in the first place? What would be the concrete advantage of data-search="link-6" over ng-click="search('link-6')"? The latter is clear and readable. — JB Nizet
– JB Nizet, Commented Aug 19, 2014 at 17:10

Brocco · Accepted Answer · 2014-08-19 17:20:13Z

2

You can create an array of links and show them separately via ng-repeat

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

Example Plnkr

answered Aug 19, 2014 at 17:20

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS menu -

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related