How to display fetched records one by one - javascript

I am working in angular-js, javscript and HTML. I am able to fetch a list of customer names and their details from the database, but I want to display those records one by one when I press next button. Can you please suggest me how to do this
Thanks in advance..

You pressed on some button , and some event will be fired and you will hit some API and response will be shown to the page . if yes lets say on button click ShowData function get triggered .
App.controller('CustomerCtrl',['$scope',function($scope){
$scope.ShowData = CustomerService.Names().then(function(data){
$scope.customers = data
})
}])
in Html
<div ng-controller="CustomerCtrl">
<div ng-repeat="customer in customers">
<h3 ng-bind="customer.name"></h3>
</div>
</div>

<div ng-controller="CustomerCtrl">
<button value="Next" ng-click="next()">
<div>
<h3>{{name}}</h3>
</div>
</div>
and your js file
App.controller('CustomerCtrl',['$scope',function($scope){
$scope.ShowData = CustomerService.Names().then(function(data){
$scope.customers = data;
})
var cnt=0;
$scope.next=function(){
$scope.name=$scope.customers[cnt].name;
cnt++;
}
}])

You can solve the above issue by using ng-repeat with limitTo filter.Here $scope.customers contains JSON array.Also limitTo is Controlled by using a variable i.
function MyCtrl($scope) {
$scope.i=1;
$scope.customers = [{
"firstName": "John",
"place":"USA",
"number":"78437375"
}, {
"firstName": "Anna",
"place":"Asia",
"number":"546464656"
}, {
"firstName": "Peter",
"place":"Europe",
"number":"24353535"
}];
$scope.showMoreCustomers=function()
{
$scope.i++;
}
$scope.showLessCustomers=function()
{
$scope.i--;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<button ng-click="showMoreCustomers()">+</button>
<button ng-click="showLessCustomers()">-</button>
<ul>
<li ng-repeat="cust in customers | limitTo:i">{{cust.firstName}},{{cust.place}},{{cust.number}}</li>
</ul>
</div>

Related

Angular Show and hide JSON objects individually

I am grabbing data from a JSON file, each object has it's on individual message. At the moment i am struggling to find a way show and hide messages separately. For example when i click on object i want to display credentials from that object only and not show credentials from the other objects.
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.colors = [
{
"color":"red",
"value":"#f00",
"message":"Simple message"
},
{
"color":"green",
"value":"#0f0",
"message":"Message with <strong>HTML</strong> tags"
},
{
"color":"blue",
"value":"#00f",
"message":"Am I going to work? I should not!"
}
]
$scope.popupBtn = function (message) {
$scope.currentMessage = message;
if (!($scope.popupBlock)) {
$scope.popupBlock = true;
}
}
});
HTML
<body ng-controller="mainCtrl">
<ul class="block-elements">
<li ng-repeat="details in colors">
<button ng-click="popupBtn(details.mesage)" ng-style="{ color: details.color }">Click Me</button>
</li>
</ul>
<div class="alert-block" ng-class="{'popup-container': popupBlock}">
<div ng-repeat="text in colors">
<a>{{text.message}}</a>
</div>
</div>
</body>
It's better if you treat the data inside your view separate from the controller.
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.colors = [
{
"color":"red",
"value":"#f00",
"message":"Simple message"
},
{
"color":"green",
"value":"#0f0",
"message":"Message with <strong>HTML</strong> tags"
},
{
"color":"blue",
"value":"#00f",
"message":"Am I going to work? I should not!"
}
]
$scope.currentMessage = "";
$scope.popupBtn = function (message) {
// set current message
$scope.currentMessage = message;
// if popup is not open, open it
if (!($scope.popupBlcok)){
$scope.popupBlock = true;
}
}
});
.alert-block {
background-color: coral;
color: white;
display: none;
}
.popup-container {
display: block;
}
<body ng-app="app">
<div ng-controller="mainCtrl">
<ul class="block-elements">
<li ng-repeat="details in colors">
<button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
</li>
</ul>
<div class="alert-block" ng-class="{'popup-container': popupBlock}">
<div>
<a>{{currentMessage}}</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
</div>
</body>
You can use ng-show directive:
<a ng-show = "YOUR_CONDITION">{{text.message}}</a>
replace YOUR_CONDICTION with your condition, for example:
ng-show = "text.color == red"
Hopes that helps.
A simple solution would be to use an Angular accordion from the Angular UI components: http://angularui.github.io/bootstrap/
<uib-accordion close-others="oneAtATime">
<div ng-repeat="text in colors">
<uib-accordion-group heading="{{text.color}}" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
{{{text.message}}}
</uib-accordion-group>
</div>
</uib-accordion>
An example: http://plnkr.co/edit/ttdSZmEWJwwfBwuHTghG?p=preview
This will give you what you're looking for I think - to show only the "opened" message, and hiding the others.
Alternatively, you could roll your own directive that loops through the siblings and hides all the messages, then shows the selected message.

angular clear form

Totally new to angular and appreciate any help received. I'm trying to build a satisfaction app in angular, I am using ng-show to pose the questions one at a time and collecting the data and sending it to firebase at the end. The difficulty I am having is clearing the answers previously give. I have tried resetting the scope and using $setPristine() but keep getting an error.
HTML
<div id = "question" class="row" ng-show="question">
<div id="badResponse" ng-click="selectResponse('bad')">
</div>
<div id="goodResponse" ng-click="selectResponse('good')">
</div>
</div>
<div ng-show="why">
<ul ng-repeat="option in whyOptions">
<li><input type="checkbox" class="reason" checklist-model="form.why" checklist-value="option">{{option}}</li>
</ul>
<button id ="enterBtn" ng-click="responseReason()">Next</button>
</div>
<div ng-show="more" class="more">
<button id ="skipBtn" ng-click="moreInfo()">{{form.extraInfo.length != 0 ? 'Next' : 'Skip'}}</button>
</div>
<div ng-show="thankYou">
<button id ="thankYouBtn" ng-click="thankYouFunction()">Home</button>
</div>
JS
$scope.form = {
experience: '',
extraInfo: ''
};
$scope.whyOptions = [
'reason 1',
'reason 2',
];
$scope.selectResponse = function(response) {
$scope.form.experience = response;
};
$scope.thankYouFunction = function() {
$scope.responses.$add({
customerRsponse: $scope.form
});
$scope.form.$setPristine();
};
});

AngularJS Filter by ID

I have the following Json_encode FRom PHP Response...
[
{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1838142879.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","img5733250433.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1230306801.jpg_doc","doc_type":"jpg"}
]
And I have tried the https://github.com/a8m/angular-filter Plugin. Here is my code.
<div ng-repeat="(key, value) in Detail | groupBy: 'ID'">
<div ng-repeat="aut in value">
<div class="item item-avatar bar bar-calm">
<h2>{{aut.name}} {{aut.model}}</h2>
</div>
<div class="item item-avatar">
<img src="../www/img/icon/{{aut.doc_name}}">
</div>
</div>
</div>
AS you see from the Array, I have the same ID but the doc_name is different, Means I want to show the ID once but the three Images should be shown as well. How can I achieve that?
Thanks in advance...
You have an error in your JSON whereby you are missing a property name.
Plunker.
angular.module('foo', ['angular.filter'])
.controller('bar', ['$scope', function($scope){
$scope.Detail = [
{
"ID" : "149",
"IDusr" : "4",
"aut_more_info" : "good",
"doc_name" : "img1838142879.jpeg",
"doc_type" : "jpg"
},
{
"ID" :"149",
"IDusr" :"4",
"aut_more_info" :"good",
// you were missing the property name 'doc_name' here...
"doc_name" :"img5733250433.jpeg",
"doc_type" :"jpg"
},
{
"ID" :"149",
"IDusr" :"4",
"aut_more_info" :"good",
"doc_name" :"img1230306801.jpg_doc",
"doc_type" :"jpg"
}
];
}]);
Also you seem to be trying to render values for properties that don't exist in your JSON data
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="foo">
<div ng-controller="bar">
<div ng-repeat="(key, value) in Detail | groupBy: 'ID'">
<div ng-repeat="aut in value">
<div class="item item-avatar bar bar-calm">
<!-- you don't have properties name or model in your json -->
<h2>{{aut.name}} {{aut.model}}</h2>
</div>
<div class="item item-avatar">
<img src="../www/img/icon/{{aut.doc_name}}">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
<script src="script.js"></script>
</body>
</html>
I think there's a conceptual error in your JSON (apart the one noticed by #A.Alger).
I like the uniqueness of an ID. For instance, in a simple database table your ID (primary key) is showed exactly one time for each select. If you make some join operations that ID can be present more than one time. This is fine, since database table (and select) lack the expressivity that JSON indeed have, so I will return a json like this:
[{
"ID": "149",
"IDusr": "4",
"aut_more_info": "good",
"docs": [{
"doc_name": "img1838142879.jpeg",
"doc_type": "jpg"
}, {
"doc_name": "img5733250433.jpeg",
"doc_type": "jpg"
}, {
"doc_name": "img1230306801.jpg",
"doc_type": "jpg"
}]
}]
In this way the documents are naturally grouped together, and you can use your angular without any plugin:
<div ng-repeat="user in users">
ID: {{user.ID}} - IDusr: {{user.IDusr}}
<h5>Images</h5>
<div ng-repeat="doc in user.docs">
{{doc.doc_name}} <br>
{{doc.doc_type}}
<hr>
</div>
</div>
This is a plunker that show how it works.

AngularJs filtering data In the other Controller

I am using two controllers and a factory service to get the data from it. I want to filter the data in the second controller by input 'ng-model'. So i have written input ng-model in both the controllers (check index.html). Its working if i tried to enter the input data in the second controller input field, but its not working if i try filtering from first controller input ng-app.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="scripts/controller.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<div style="float: left; width: 300px;">
<div ng-controller="checkBoxModuleCtrl">
<ul>
<li ng-repeat="item in chkBoxList" style="list-style: none;">
<input type="checkBox" value="{{item}}" ng-click="checkBoxClickHandler($index, $event)"> {{item}}
</li>
</ul>
<input type="text" ng-model="myText" />
</div>
</div>
<!--<input type="button" ng-click="checkBoxClickHandler()" value="Click Me!"> </input>-->
<div style="float: left; width: 400px; height: 600px; overflow-y: scroll;" >
<div>
<div ng-controller="panelCtrl">
<input type="text" ng-model="myText" />
<ul>
<li ng-repeat="panelItem in panelData|filter:myText" style="list-style: none;">
<div>
<b>Title </b/>: {{panelItem.name }}<br/>
<b>Channel-Type </b>: {{panelItem.type }}<br/>
<b>description </b>: {{panelItem.description }}
</div>
<hr weight="5" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
controller.js
var app = angular.module("app", ["checkBoxserviceModule"]);
app.controller('appCtrl', function($scope){
});
app.controller('checkBoxModuleCtrl', function($scope, externals){
$scope.chkBoxList = [];
$scope.init = function(){
$scope.chkBoxList = externals.getCheckBoxList()
};
$scope.init();
$scope.checkBoxClickHandler = function(itemIndex, event){
alert(event.currentTarget.value + "will be handling click listener for check box" + itemIndex)
}
});
app.controller("panelCtrl", function($scope, externals){
$scope.init = function(){
$scope.panelData = externals.getPanelData();
};
$scope.init();
$scope.customFilter = function(panelItem){
return panelItem.toUpperCase;
}
});
var checkBoxserviceModule = angular.module("checkBoxserviceModule", []);
checkBoxserviceModule.factory("externals", function(){
return{
getCheckBoxList : function(){
return [ "sports", "movies", "entertainment", "news" ]
},
getPanelData : function(){
//alert("in services")
return [
{
"name":"cinmax",
"type": "movies",
"description":"Some Tesxt"
},
{
"name":"setmax",
"type": "sports",
"description":"Some Tesxt"
},
{
"name":"mtv",
"type": "entertainment",
"description":"Some Tesxt"
},
{
"name":"ibn news",
"type": "news",
"description":"Some Tesxt"
}
];
}
};
});
Controllers use prototypical inheritance to share scope. So, you need to make sure the object you want inherited is an actual object in order for the reference to stay binded. If try to share a primitive from the scope, they will not be binded correctly and each controller will end up making it's own copy.
This might inherit correctly initially, but the binding will disconnect as soon as you change the value of the child's scope.number.
-ParentController
-scope.number = 4
-ChildController
-scope.number //will not stay binded to parent's scope
This on the otherhand, if you create an object on the scope, will inherit a reference to the object, and will stay binded in the child controller.
-ParentController
-scope.myObject.number = 4
-ChildController
-scope.myObject.number //will stay binded to parent's scope
Here is a better explanation: Why don't the AngularJS docs use a dot in the model directive?

AngularJS push item does not work

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:
When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.
<script type="text/javascript" src="angular.js" ></script>
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
</div>
</div>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
<script type="text/javascript">
var App = angular.module("App", []);
App.controller("MyController", function($scope){
$scope.names = [
{ first : "Thomas"},
{ first : "Geferson"},
{ first : "Jenny"},
{ first : "Maria"},
];
$scope.AddName = function(){
$scope.names.push({
name : $scope.Namer.name;
});
};
});
</script>
Working DEMO
var App = angular.module("App", []);
App.controller("MyController", function ($scope) {
$scope.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}];
$scope.AddName = function () {
$scope.names.push({
first: $scope.Namer.name
});
};
});
You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name" />
<input type="submit" data-ng-click="AddName()" />
</div>
</div>
Move your inputs to inside your MyController so that it executes code in the scope created by the controller:
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
</div>
</div>
Another mistake is that you need to change name to first to match with your existing object
$scope.AddName = function(){
$scope.names.push({
first : $scope.Namer.name //change to first and remove the ;
});
};
DEMO

Categories