I have a javascript function to which I should pass a parameter.This parameter should be retrieved from html like this
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
my function is accounts.findAllAccountsByRestaurant() and the parameter is restaurant, which is retrieved from ng-repeat.How can I pass this parameter to the function?Thanks in advance.
try like this
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="product in products">
<td ng-init="Y(product)">{{product}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.products=[11,22,33];
$scope.Y= function(ar)
{
alert(ar);
};
});
</script>
</body>
If you've defined your scope correctly, everything should work as it is:
http://jsfiddle.net/jpwup7Lb/5/
$scope.accounts={
selectedRestaurants:
["one","two","three"],
findAllAccountsByRestaurant:function(restaraunt){
return "here's all accounts for "+restaraunt;
}
}
try doing this:
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
Then in your controller
$scope.accounts.findAllAccountsByRestaurant = function(restaurant) { return alert(restaurant); };
Related
i'm new to Angular JS, and i'm learning how to create a table from the URL. I found this code online to show how to display the information in the URL into table but it wont work, can you guys help me check this out. Thank you.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="planetController">
<table>
<tr>
<th>Planet</th>
<th>Distance</th>
</tr>
<tr ng-repeat="x in names">
<td>{{ x.name}}</td>
<td>{{ x.distance}}</td>
</tr>
</table>
</div>
<script>
function planetController($scope, $http) {
$http.get("http://www.bogotobogo.com/AngularJS/files/Tables/planet.json")
.success(function(response) {$scope.names = response;});
}
</script>
</body>
</html>
You need to define a init() function and define your api call.
<div ng-app="myApp" ng-controller="customersCtrl" ng-init="init()">
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.distance }}</td>
</tr>
</table>
</div>
function init(){
$http.get("http://www.bogotobogo.com/AngularJS/files/Tables/planet.json")
.success(function(response) {
$scope.names = response;
});
}
Hope this will fix your issue.
your code seems to fine.
Check your URL response by printing the response in Browser console. I think, you are getting CORS error for the URL(http://www.bogotobogo.com/AngularJS/files/Tables/planet.json).
Just go through below code for creating table using local data instead of API/URL.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.distance }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names= [
{"name":"Neptune", "distance":30.087},
{"name":"Uranus", "distance":19.208},
{"name":"Saturn", "distance":9.523},
{"name":"Jupiter", "distance":5.203},
{"name":"Mars", "distance":1.524},
{"name":"Earth", "distance":1.0},
{"name":"Venus", "distance":0.723},
{"name":"Mercury", "distance":0.387}
]
});
</script>
</body>
</html>
I'm fetching data from api and populating in the table i need to relaod the table only in every 1 second , i tried using $timeout but im getting error saying -
$scope.tableParams.reload();//TypeError: Cannot read property 'reload' of undefined
code
<div align="center">
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-table="tableParams">
<tr>
<td>device id</td>
<td>device unique id</td>
<td>access status</td>
<td>current time</td>
</tr>
<tr>
<td>{{ access.id }}</td>
<td>{{ access.devid }}</td>
<td><img ng-src="{{statusValues[access.status]}}" /></td>
<td>{{ access.CurrentTime }}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $timeout) {
$http.get("http://example.com/get")
$scope.reloadTable = function () {
$timeout(function () {
$scope.tableParams.settings().$scope = $scope;
$scope.tableParams.reload();
$scope.reloadTable();
}, 1000)
};
$scope.reloadTable();
});
</script>
Hi Your trying to reload the params using reload method, but it seems that reload() method is working with $route concept to update the url, based on params.
and insted of $timeout , try with $interval,
I've done some modification here, Plesae take a look and This may helpful
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $interval) {
$scope.fn = function(){
$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(data){
console.log(data.data)
$scope.Tdata = data.data;
})
}
$interval(function () {
$scope.fn()
}, 1000)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="customersCtrl">
<div align="center">
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-table="tableParams">
<tr>
<td>device id</td>
<td>device unique id</td>
<td>access status</td>
<td>current time</td>
</tr>
<tr ng-repeat="d in Tdata">
<td>{{ d.id }}</td>
<td>{{ d.title }}</td>
<td><img ng-src="{{}}" /></td>
<td>{{ d.body }}</td>
</tr>
</table>
</div>
</div>
</div>
just add the following code line into my code after tableParams instance creation.
$scope.tableParams.settings().$scope = $scope;
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $timeout, $interval) {
getData = function(){
$http.get("http://example.com/get")
.success(function(data) {
$scope.tableParams.settings().$scope = $scope;
$scope.reloadTable();
})
.error(function(data, status) {
console.error(status);
})
}
$interval(function (){
getData();
}, 1000);
</script>
I am using ng-repeat to generate table rows on HTML. I have HTML tags inside my row content that I want to format the content with.But it will only print the text with html tags as plain text without identifying them as HTML tags.
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td>{{styleRowDetail.shortMessage}}
</td>
<td>{{styleRowDetail.classOriginated}}
</td>
<td>{{styleRowDetail.method}}
</td>
<td>{{styleRowDetail.lineRange}}
</td>
<td>{{styleRowDetail.details}}
</td>
</tr>
here's a working code.
var jsondata = [{
"shortMessage": "data 1",
"classOriginated": "data 2",
"method": "<i>data 3</i>",
"lineRange": "data 4",
"details": "<b>data 5</b>"
}];
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
$scope.styleRowDetails = jsondata;
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td ng-bind-html="styleRowDetail.shortMessage">
</td>
<td ng-bind-html="styleRowDetail.classOriginated">
</td>
<td ng-bind-html="styleRowDetail.method">
</td>
<td ng-bind-html="styleRowDetail.lineRange">
</td>
<td ng-bind-html="styleRowDetail.details">
</td>
</tr>
</table>
</div>
Hope it helps :)
Simple Example to generate multiple row using ng-repeat Directive in AngularJS.
HTML
<div ng-app="myApp" ng-controller="appCtrl">
<table>
<tr ng-repeat="i in styleRowDetails">
<td>{{i.val}}</td>
</tr>
</table>
</div>
JS
var myApp = angular.module('myApp', [])
myApp.controller('appCtrl', ['$scope', function($scope) {
$scope.styleRowDetails = [{
val: 'welcome'
}, {
val: 'hello'
},{
val: 'world'
}
];
}]);
Working Fiddle: https://jsfiddle.net/rittamdebnath/3oy5fok3/
You should try ng-bind-html
<td ng-bind-html="styleRowDetail.details"></td>
For a better understanding visit the documentation of ng-bind-html by angularjs
I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}
You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>
Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}
How can I pass array Json data from angularjs Controller to html.
Here is my html
<body ng-app="bookApp">
<div ng-controller="bookListCtr">
<table>
<thead>
<tr>
<th>something</th>
<th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><( item.id )></td>
</tr>
</tbody>
</table>
</div>
</body>
Here is my Angularjs
var bookApp = angular.module('bookApp', []);
bookApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<(');
$interpolateProvider.endSymbol(')>');
});
bookApp.controller('bookListCtr', function ($scope, $http) {
$http.get('http://localhost/client_side/public/book').success(function(data) {
if(data.s_respond === 200){
$scope.items = data.data;
console.log(data.data)
}
});
});
This is Json data After console
s_respond = 200
data = "[{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]"
I think that you need parse the json
$scope.items = JSON.parse(data.data);
a link that explain that:
https://www.quora.com/How-can-I-convert-JSON-format-string-into-a-real-object-in-JS
There r two tags... meaning 2 column try adding another in Ua body
<body ng-app="bookApp"> <div ng-controller="bookListCtr">
<table>
<thead>
<tr> <th>something</th> <th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items"> <td>{{item.id }}</td>
<td>something else</td>
</tr>
</tbody>
</table>
</div>
</body>