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