ng-if & ng-show failing to toggle visibility of table - javascript

I have the below angularJS code which was working fine up until yesterday. I have no idea why this isn't working the unresponsive angular tags {{ variable }} are not showing therefore I assume I'm connected to my ng app. As said nothing has changed my data source is retrieved by localhost successfully and I can see in developer tools that all the correct content is there. I've searched for any minor syntax errors and cant find any whatsoever I'm completely stumped as to why this isn't working.
ng-app
var app = angular.module("viewJSON",[]);
app.controller("viewCtrl",function Hello($scope, $http) {
$http({
method: 'GET',
url: './data.json'
}).then(function (response){
$scope.products = response.data;
},function (error){
console.log("error");
});
});
html
<!DOCTYPE html>
<html ng-app="viewJSON">
<head>
<link rel="stylesheet" href="home-page.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="home-page.js"></script>
</head>
<body ng-controller="viewCtrl">
<div class="wrap">
<div class="search" ng-innit="x=0">
<b>Product Name:</b> <input type="text" ng-model="searchName" class="searchTerm" ng-keydown="x = x+1"><br>
<b>Product Brand:</b> <input type="text" ng-model="searchBrand" class="searchTerm" ng-keydown="x = x+1">
</div>
</div>
<div>
<table class="resultContent" ng-if="x > 0">
<tr>
<th>Brand</th>
<th>Name</th>
<th>Price</th>
<th>Retailer</th>
<th>Image</th>
</tr>
<tr id="rows" ng-repeat="item in products" ng-if="searchName.length != 0 && searchBrand.length != 0" ng-show="item.name.includes(searchName) && item.brand.includes(searchBrand)">
<td class="otherCol">{{ item.brand }}</td>
<td class="otherCol">{{ item.name }}</td>
<td class="otherCol">{{ item.price }}</td>
<td class="otherCol">{{ item.retailer }}</td>
<td class="imageCol"><img ng-src="{{ item.image_url}}"></td>
</tr>
</table>
</div>
</body>
</html>
I have tried putting the script at the bottom of the page just above the closing body tag, as stated previously I believe angular is responsive as im not seeing any {{ x }} tags on my web page. The data parses to the js object without raising the error exception also. As said the code was working fine yesterday, could this be something to do with my localhost configuration or am I missing something obvious.

You have a typo in your 'ng-innit', replace this with 'ng-init'.

Related

How to display table from json URL by AngularJS?

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>

How to update a number in HTML by incrementing it when a new text input is submited?

I need to add +1 to the total number of tweets when a new tweet (text input) is submitted:
Here is my HTML:
<!DOCTYPE html>
<html lang="en" data-ng-app="Twitter">
<head>
<meta charset="UTF-8">
<title>Twitter Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="profileArea">
<img id="profile" src="http://potdeli.webs.com/twitter.png" alt="tweet">
<p style="color:white;"><strong>Tweeto</strong></p>
<p>#TweetoTwiteech</p>
<table style="width:100%">
<tr>
<th>Tweets</th>
<th colspan="1">Following</th>
<th colspan="1">Followers</th>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
<div class="tweets" ng-app="" ng-controller="TweetsController">
<form method="POST" action="" ng-submit="addTweet()">
<h2>Compose new tweet</h2>
<input name="tweet" type="text" ng-model="newTweet" ng-maxlength="140" placeholder="What's happening?">
<button type="submit" value="addTweets">Tweet!</button>
</form>
<div class="tweetDisplay" ng-repeat="tweet in tweets track by $index">{{ tweet }}
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js">
</script>
<script src="tweets.js">
</script>
</body>
</html>
And here is the JavaScript:
function TweetsController($scope) {
$scope.tweets = ["First sample tweet", "Second sample tweet"];
$scope.addTweet = function() {
if(this.newTweet) {
$scope.tweets.push($scope.newTweet);
$scope.newTweet = "";
}
};
}
I tried a couple of things but I didn't get the desired result, also I checked out a few similar Stack Overflow questions but I wasn't able to get it figured out.
Oh man, I can't believe what a half-wit I am! I just added:
<td>{{ tweets.length }}</td>
Instead of number 2, as the number of tweets and placed this on the body:
<body ng-app="" ng-controller="TweetsController">
Thanks to all for pointing me in the right direction!!
Your table markup is outside of your controller scope. Make it part of your controller scope, and then you could print a counter value there, such as $scope.tweets.length

How to assign html table to Variable

I need this table to one variable, so that I can pass this variable as
String to my email program.
message.setContent(variable, "text/html");
I need this variable as Webemails not supporting scripting executions
at their front
Is there any way I can pull table information to variable?? is it
possible??
I'm using angular js and displaying table as
<table>
<tr>
<th>UserId</th>
<th>UserName</th>
<th>Points</th>
</tr>
<tr ng-repeat="country in countries.userpointsList| orderBy:'country.uservo.userId' ">
<td> {{ country.uservo.userId }}</td>
<td >{{ country.uservo.userName }}</td>
<td> {{ country.points }}</td>
How I can put this table to one variable??
You could simply do variable = document.getElementsByTagName("table")[0]. So the variable will contain the entire HTML code of the table
it works
<html>
<body>
<div id="sasi" >
<table border="1">
<tr><td>sasikar</td><td>sasikar</td></tr>
<tr><td>srikar</td> <td>sasikar</td></tr>
</table>
<script>
var k="";
k=document.getElementById("sasi").innerHTML;
alert(k);
</script>
</html>

$values not printing in ng-repeat which avilable in map in angularjs

I have map which is having key and vaule has values startes with $. And i am displaying these things in table using ng-repeate. But values which start with $ not printing in table.
I have sharing code, can some please let me know how can i achive this
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
outside of map:------- {{name1}} --------printing ok
<br> <br>
<table >
<tr>
<td width="15%" class="greyTdHeads tdPad">Field Name</td>
<td width="14%" class="greyTdHeads tdPad">Field Value</td>
</tr>
<tr ng-repeat="(key,value) in params">
<td class="whiteTd tdPad">{{key}}</td>
<td ><input
Type="text"
ng-model="params[key]"></input></td>
</tr>
</table>
inside of map , not able to print
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.name1 = "$top";
$scope.params=
{without$:"without$val","$with$":" ",$batchsize:" ",$expand:" ",$filter:" ",$orderby:" ",$select:" ",$skip:" ",$top:" "}
});
</script>
</body>
</html>
Angular ignore variables starting with '$' because he uses some variables with this standard like for example $$hashkey
it applys to angular.equals, {{}}, ng-bind
you can create a new directive and read those values but i dont recommend it
have a good day.

Filter on a single column value using AngularJS

I've created an AngularJS application with a input for filtering the <tbody>'s <tr>.
Right now my table is filtering on both Country and City - I want it to only filter on Country. I've tried a lot of variations of filter:{Country: Search} but it doesn't seem to be working.
Thanks to user edisoni.1337 I have an updated working example using AngularJS 1.2.1 (the one seen below).
var app = angular.module('myApp', []);
app.controller('callCtrl', function($scope)
{
$scope.stuff = [{"House": {"Country": "Denmark", "City": "Copenhagen"}}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="callCtrl">
<input type="text" ng-model="Search">
<table>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
<td>{{x.House.Country}}</td>
<td>{{x.House.City}}</td>
</tr>
</tbody>
</table>
</div>
CDN for 1.5.6:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Here you have a working jsfiddle
<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
<td>{{x.House.Country}}</td>
<td>{{x.House.City}}</td>
</tr>
Also read this article for better understand
http://www.w3schools.com/angular/ng_filter_filter.asp
This works on 1.5.6 with few changes on the code above: http://jsbin.com/zuxokuy/edit?html,js,output

Categories