this result of the fetch.php that contain on the data from mysql database page
[{"id":"1","name":"Moblie phone","price":"3000","image":"mobil1","desc":"samasong mobile garand prime 2+"},{"id":"2","name":"Watch","price":"200","image":"watch","desc":"modern watch its color is gold"},{"id":"3","name":"Labtop","price":"4000","image":"labtop","desc":"hp labtop core i5 space 500gb "},{"id":"4","name":"moble lite","price":"1999","image":"mobil2","desc":"moble lite sterrr"}]
this html code
<!DOCTYPE html>
<html>
<head>
<title>shoping cart</title>
<link rel="stylesheet" type="text/css" href="functions/bootstrap.css">
<script type="text/javascript" src="functions/jquery.js"></script>
<script type="text/javascript" src="functions/bootstrap.min.js"></script>
<script type="text/javascript" src="functions/angular.min.js"></script>
</head>
<body>
<h2 align="center">Shopping cart application by angularjs and php</h2>
<div class="container" ng-app="shoppingcart" ng-controller="shoppingcartcontroller">
<div class="row " >
<div class="box col-md-3" style="margin-top: 20px"
ng-repeat="p in products">
{{p.name}}
{{p.price}}
</div>
</div>
</div>
this angularjs code
<script >
var app=angular.module("shoppingcart",[]);
app.controller("shoppingcartcontroller",function($http,$scope){
$scope.loadproduct=function(){
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
};
});
</script>
Why do you need this loadproduct function?
Please only this in your controller:
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
In addition, take in consideration to check whether you need to define '$scope.products' as an empty array outside the scope of your get request.
Related
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I use ng-repeat for messages in chat:
ng-bind-html="message.message + getAttachmentTemplate(message.attachment)"
How I can to cut special symbols as JS, HTML and safe from XSS atack?
But I need to display HTML inside getAttachmentTemplate
You need to include angular-sanitize.js, you can then load the ngSanitize module
angular.module('app', ['ngSanitize']);
You can then use the $sanitize service to sanitize your HTML snippets, see an example below:
angular.module('expressionsEscaping', ['ngSanitize'])
.controller('ExpressionsEscapingCtrl', function($scope, $sanitize) {
$scope.msg = 'Hello, <b>World</b>!';
$scope.safeMsg = $sanitize($scope.msg);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/1.0.2/angular.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-sanitize.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="expressionsEscaping" ng-controller="ExpressionsEscapingCtrl">
<div class="container">
<h2>Angular $sanitize demo</h2>
<p ng-bind="msg"></p>
<p ng-bind-html-unsafe="msg"></p>
<p ng-bind-html="msg"></p>
<p ng-bind-html-unsafe="safeMsg"></p>
<div>Provided by <a onclick="window.open('stackoverflow.com')">Stack Overflow</a>
</div>
</div>
</body>
</html>
New to AngularJS here (have used BackboneJS before), and am trying to learn AngularJS. I'm attempting to basically render a bunch of objects with their own div "views." In my controller, I have an array of objects (all objects with same properties) that I would pretty much like to render as sticky-notes. My thought process was to somehow grab the data from each object in the array, and render each as div's (which I could style to look like a sticky-note).
The code I have thus far:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, Note) {
$scope.notesArray= [];
$http.get('notes_data.json').success(function(data) { // basically grab all the data from a JSON file
data.data.forEach(function(obj) {
$scope.notesArray.push(obj);
});
})
}]);
My index.html looks like:
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
Some stuff here
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Also, it'd be great if someone could comment on how I can represent these objects more effectively (using a factory, service, etc). Thanks!
Do something like this, with ng-repeat :
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="note" ng-repeat="note in notesArray">
<div class="wrapper" ng-class="note.done ? 'done' : 'undone'">
<p class="title">{{note.title}}</p>
<span class="done">{{note.done}}</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I am not able to get the template snippets from template cache (which looks like the following:)
<script id="sub1.html" type="text/ng-template">
<div> sub1 Content</div></script>
I think it is because of line number 11 in index.html file
<div class="hiddenContent" ng-include="'templates.html'">
If I replace this line with the templates.html it works.
How to make this work keeping the line number 11?
Look at my code in Plunkr Code
It works, try moving the template into the index.html
http://plnkr.co/edit/MOwCD8UyRT2IBmaeeAMX?p=preview
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="hiddenContent" ng-include="'templates.html'">
</div>
<h1>Hello Plunker!</h1>
{{test}}
<myapp-directive></myapp-directive>
</div>
</body>
</html>
<script id="sub1.html" type="text/ng-template">
<div>sub1 Content</div>
</script>
<script id="sub2.html" type="text/ng-template">
<div>sub2 Content</div>
</script>
Maybe the problem is AngularJS can't find the ng-template in another file. It also work if you define the sub1.html in templateCache:
var app=angular.module("myApp",[]);
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("sub1.html","<div> sub1 Content</div>");
}]);
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="userCtrl">
<div class="container">
<div ng-include="'myUsersList.html'"></div>
<div ng-include="'myUsersForm.html'"></div>
</div>
</body>
</html>
I have the two files 'myUserList.html' and 'myUsersForm.html' in the same folder as this index file. It is still not loading the two 'html pages' one below other. I am getting a blank page. Is anything missing???
And also don't miss to initialize model.
angular.module('MyApp', []);