I have a JSON the following JSON file:
[
{
"pageID": 1,
"pageName": "Home Page",
"pageHead": "Home Page Title"
},
{
"pageID": 2,
"pageName": "Second Page",
"pageHead": "2nd Page Title"
},
{
"pageID": 3,
"pageName": "Third Page",
"pageHead": "3rd Page Title"
}
]
What I am trying to do is display a page takes its title and header from the JSON file.
To do this, I have created the following JS code:
var dbApp = angular.module('dbApp', ['ngSanitize']);
dbApp.controller('dbCtrl', function($scope, $http){
$http.get('pageDB.json').success(function(data) {
$scope.pageContent = data;
$scope.pageHeadDB = data[0].pageHead;
$scope.pageBodyDB = data[0].pageBody;
});
});
In the JS code I am using $scope.pageHeadDB = data[0].pageHead; using specific index [1] but please don't worry about this, later I will make it dynamic.
The following view is supposed to display what I need:
<html ng-app="dbApp" ng-controller="dbCtrl">
<head>
<title>{{pageHeadDB}}</title>
</head>
<body>
<div ng-bind-html="pageBodyDB"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>
The page displays the data when I use [0] which is the first item from the JSON file, but I don't understand why it doesn't work when I make the index [1] and/or [2]?
Any thoughts?
I can't test the <title> tag problem using this code snippet tool, but here's a solution simplifies some of your logic and works regardless of page number:
angular
.module('dbApp', ['ngSanitize'])
.controller('dbCtrl', dbCtrl);
dbCtrl.$inject = ['$window', '$scope', '$http'];
function dbCtrl($window, $scope, $http){
$scope.page = 0;
// stubbing ajax call for demo purposes
// $http.get('pageDB.json').success(function(data) {
var data = [
{
"pageID": 1,
"pageName": "Home Page",
"pageHead": "Home Page Title"
},
{
"pageID": 2,
"pageName": "Second Page",
"pageHead": "2nd Page Title"
},
{
"pageID": 3,
"pageName": "Third Page",
"pageHead": "3rd Page Title"
}
];
$scope.pageContent = data;
// });
}
<html ng-app="dbApp" ng-controller="dbCtrl">
<head>
<title>{{ pageContent[page].pageHead }}</title>
</head>
<body>
<h1>{{ pageContent[page].pageHead }}</h1>
<div ng-bind-html="pageContent[page].pageName"></div>
<hr/>
<label>Page:</label>
<input type="text" ng-model="page"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>
Related
I have some code for creating a Hierarchial tree in my angular project
I'm not sure where to use this code.
So there are only two codes- one is for HTML and another is a javascript
I created an angular project using ng new command, so it generated all the files.
Can you guide me on where I can put these codes?
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Tree Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body ng-app ng-controller="SampleController">
<script type="text/ng-template" id="treeLevel.html">
<ul>
<li ng-repeat="item in items">
<input type="checkbox"
name="itemSelection"
ng-model="item._Selected" />
{{item.text}}
<div ng-include=" 'treeLevel.html'"
onload="items = item.children">
</div>
</li>
</ul>
</script>
<div ng-include=" 'treeLevel.html' "
onload="items = sourceItems">
</div>
<pre> {{sourceItems | json}} </pre>
</body>
</html>
and the java script is:
function SampleController($scope) {
$scope.sourceItems = [
{
text: "Item A",
children: [
{
text: "Item A-1",
children: [
{
text: "Item A-1-1"
}, {
text: "Item A-1-2"
}
]
}, {
text: "Item A-2"
}, {
text: "Item A-3"
},
]
}, {
text: "Item B",
children: [
{ text: "Item B-1" },
{ text: "Item B-2" },
{
text: "Item B-3",
children: [
{ text: "Item B-3-1" },
{ text: "Item B-3-2" },
]
}
]
}
];
}
So basically Angular works with components. A component is basically just an independent piece of the website like it could be a navbar, a sidebar a post component etc. A component has two main parts, the HTML file and the JS file and the are both linked together. So basically the first piece of code you just showed would go on the HTML and the Javascript on the JS part of the component.
Here is more information on how this works and specially on how to create an Angular component.
PS: in the TS (Typescript, a language that inherits from Javascript but with strong typing) file is where your Javascript would go.
I hope this helped, let me know if you need more info :D
Problem
My views are not loading. I am using ngAnimate and ui.router. This is my first project with Angular and I am trying to lean.
First of my file structure
Next up ill post my main code
controllers/form.js
/**
* Created by ukcco1boa on 25/05/2017.
*/
// our controller for the form
// =============================================================================
console.log('test');
var submit = angular.module('formApp',
[
'ngAnimate',
'ui.router'
]);
submit.controller('formController', function ($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function () {
alert('awesome!');
};
});
// =============================================================================
// our controller for drop down select
var dropdown = angular.module(
'plunker',
[]
);
dropdown.controller('MainCtrl', function ($scope) {
$scope.user = {bankName: ''};
$scope.banks = [{
"name": "Bank A",
"branches": [{
"name": "Branch 1",
"code": "1"
}, {
"name": "Branch 2",
"code": "2"
}]
}, {
"name": "Bank B",
"branches": [{
"name": "Branch 3",
"code": "3"
}, {
"name": "Branch 4",
"code": "4"
}, {
"name": "Branch 5",
"code": "5"
}]
}];
});
app.js
angular
.module('formApp', [
'ngAnimate',
'ui.router'
]);
console.log('main')
config.js
angular
.module('formApp', [
'ngAnimate',
'ui.router'
])
// configuring our routes
// =============================================================================
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/signup)
.state('form.signup', {
url: '/signup',
templateUrl: 'views/form-signup.html'
})
// url will be /form/select
.state('form.select', {
url: '/select',
templateUrl: 'views/form-select.html'
})
// url will be /form/type
.state('form.type', {
url: '/type',
templateUrl: 'views/form-type.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/signup');
});
When I look at each individual page I don't seem to be inheriting any style or JavaScript.
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="../scripts/css/style.css">
<link rel="stylesheet" href="../scripts/css/override.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="controllers/form.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="formApp">
<div class="container">
<!-- views will be injected here -->
text
<div ui-view></div>
</div>
</body>
</html>
I'm learning AngularJS. So I'm going through the AngularJS tutorials on here - https://docs.angularjs.org/tutorial/step_07. While I'm in step 7 I'm facing syntax error while using angularjs $http service. This is my application directory structure and files.
app/
phone-list/phone-list.component.js
phone-list/phone-list.module.js
phone-list/phone-list.template.html
app.module.js
phonelist.php
phonelist.json
phone-list/phone-list.component.js
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phonelist.json').then(function(response) {
console.log(response);
self.phones = response.data;
});
}
});
phone-list/phone-list.module.js
angular.module('phoneList', []);
phone-list/phone-list.template.html
<p>Search: <input ng-model="$ctrl.query" /></p>
<p>
<select data-ng-model="$ctrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p>
<ul>
<li data-ng-repeat="phone in $ctrl.phones | filter: $ctrl.query | orderBy: $ctrl.orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
app.module.js
angular.module('phoneCatApp', ['phoneList']);
phonelist.php
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | Phone List</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="phone-list/phone-list.module.js"></script>
<script type="text/javascript" src="phone-list/phone-list.component.js"></script>
<script type="text/javascript" src="app.module.js"></script>
</head>
<body data-ng-app="phoneCatApp">
<phone-list></phone-list>
</body>
</html>
phonelist.json
[
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 2,
},
{
"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1,
},
{
"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 4
}
]
Issue I'm facing is below
You have extra , two place, which is leading to error in json parsing
"age": 2, //<--here
"age": 1, //<--here
You should remove the invalid , from JSON response & make sure all the properties & strings are wrap inside "(double quotes)
var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.
I have one dropdown for country, another dropdown for cities and an autocomplete textbox for places.
When I select country in the first dropdown it shows cities list for that particular country in the second dropdown.
Next I want to show the places list under the selected city in the autocomplete textbox.
I have one local JSON file, html page and JavaScript file. The HTML code goes as follows:
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="js/json4update.js">
< script type = "text/javascript"
src = "js/textauto.js" >
</script>
</head>
<body>
<div ng-controller="MyController">
<select ng-model="Countryselected" ng-options=" coun.country for coun in country" ng-change="getCity()">
<option value="">Select</option>
</select>
<select ng-model="cityselect" ng-options=" c.name for c in Citydetails " ng-disabled="!Countryselected">
<option value="">Select</option>
</select>
<input id="tags" ng-model="placeselected" ng-keyup="complete()" placeholder="Type place name" ng-disabled="!cityselect" />
</div>
</body>
</html>
Here goes my .js file, here is the problem I guess. I am not able to use JS function on required place.
var app = angular.module('myApp', []);
app.controller('MyController', function ($scope, $http) {
$http.get("file2update.json").success(function (data) {
$scope.country = data.records;
$scope.getCity = function () {
$scope.Citydetails = $scope.Countryselected.cities;
$scope.places = $scope.cityselect.place;
}
});
$scope.complete = function ()
{
$("#tags").autocomplete({
source: $scope.placeselected
});
}
});
Here is my JSON file .
{
"records": [{
"cities": [{
"name": "patna",
"place": [
"p1",
"p2",
"p3"]
}, {
"name": "delhi",
"place": [
"d1",
"d2"]
}],
"country": "india"
}, {
"cities": [{
"name": "Australia1",
"place": [
"A1",
"A2",
"A3"]
}, {
"name": "Australia2",
"place": [
"a11",
"a22",
"a33"]
}],
"country": "Australia"
}]
}