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

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.

Related

angular js ng-click ng-controller and ng-app

I can't get angularJS to recognize a variable defined in ng-app, ng-controller, or ng-click.
3 sets of codes that I tried so far are:
<table>
<thead>
<tr>
<script>
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function ($scope) {
$scope.clkCount = 0;
});
</script>
<th ng-app="ngClickApp" ng-controller="ngClickCtrl">
<button class="some-scss" ng-click="clkCount = clkCount +1">
<b>someCol {{ clkCount }}</b>
</button>
</th>
<table>
<thead>
<tr ng-app="ngClickApp">
<th><button class="some-scss" ng-controller="ngClickCtrl"><b>someCol {{ clkCount }}</b></button></th>
<script>
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function ($scope) {
$scope.clkCount = 0;
});
</script>
<table>
<thead>
<tr ng-app="ngClickApp">
<th><button class="some-scss" ng-controller="ngClickCtrl"><b>someCol {{ clkCount }}</b></button></th>
<script>
var ngClickCtrl = function ($scope) {
$scope.clkCount = 0;
};
</script>
All three of them failed to recognize clkCount.
Examples that I found do not use table format. (https://www.tutorialsteacher.com/angularjs/angularjs-scope) or (https://www.tutlane.com/tutorial/angularjs/angularjs-ng-click-event-function-with-example)
Also, just out of curiosity, to test ng-click in the first code, I defined some function and called it in ng-click, but it did not work.
clickTest() {
console.log('1');
}
<th><button class="some-scss" ng-click="clickTest()">someButton</button></th>
did not print 1 when I clicked "someButton" whereas
clickTest() {
console.log('1');
}
<th><button class="some-scss" (click)="clickTest()">someButton</button></th>
did print 1 when I clicked the same button.
So, I was wondering if ng-app, ng-controller, and ng-click need some type of initiation or they have to be in the <tbody> or any other suggestions why all the above codes that worked just fine in examples do not work in the tables.
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<table>
<thead>
<tr ng-app="ngClickApp">
<th>
<button class="some-scss" ng-controller="ngClickCtrl" ng-click="clkCount=clkCount+1"><b>someCol {{clkCount}}</b></button>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script>
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function ($scope) {
$scope.clkCount = 0;
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function($scope) {
$scope.clkCount = 0;
});
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<table>
<thead>
<tr ng-app="ngClickApp">
<th>
<button class="some-scss" ng-controller="ngClickCtrl" ng-click="clkCount=clkCount+1"><b>someCol {{clkCount}}</b></button>
</th>
</tr>
</thead>
</table>
</body>
</html>
Hi,
You should not put the script inside a table. Need to keep the script in a separate file or at the end of your HTML or just above the body tag inside HTML so that the page loads faster as javascript code can block/delay the loading process.
Try not to use scripts, CSS or HTML in the same file to keep the code easy to read, maintain and modify.
Thanks

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

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'.

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

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

AngularJS dynamic row generation with HTML formatting

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

Categories