I have following html file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="list.css">
</head>
<body class="body" ng-app="myApp" ng-controller="FirstController as ctrl">
<div>
<input type="text" ng-model="inputText">
</div>
<first-tag></first-tag>
</body>
</html>
In this I have an element directive called first-tag.
Following is my js file:-
var app=angular.module('myApp',[]);
app.controller('FirstController',function($http){
var self=this;
$http.get("data.json").success(function(response){
self.data=response.records;
})
})
app.directive('firstTag',function(){
return{
restrict:'E',
replace:true,
templateUrl:'template.html',
controller:'FirstController',
controllerAs:'ctrl'
}
})
In my directive i have declared template.html as the templateURL. Can someone tell me why is following content not working properly in the code?
<table>
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<tr>
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</div>
</table>
Following seems to be working fine though:-
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<p>Name:{{message.modelName}}</p>
<p>Brand:{{message.modelBrand }}</p>
<img src="{{message.imageUrl}}" width="auto" height="auto">
</div>
I want to print above contents in a table.
I think it should be:
<table>
<tr class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img ng-src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</table>