We Keep Coding

json not working in Angular

I'm a beginner in Angular so I hope someone to help me!
This is my script.js
ar app = angular.module('computer', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl : 'main.html',
controller : 'MainCtrl'
})
.when('/service', {
templateUrl : 'service.html',
controller : 'ServicesCtrl'
})
.otherwise({redirectTo:'/main'});
}])
.controller('MainCtrl', ['$scope', function($scope){
}])
.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
$http.get('serviceData.json').then(function(response){
console.log(response);
$scope.services = response.data;
});
}]);
and this is service.html
<div class="row">
<div class="col-md-12">
<h2>Services</h2>
<div ng-repeat="serv in services">
<div class="row service">
<div class="col-md-2">
<img src="computer-icon.png" class="img-responsive">
</div>
<div class="col-md-10">
<h3>{{ serv.id : serv.name }}</h3>
<p>{{serv.Description}}</p>
<button class="btn btn-primary">Read More…</button>
</div>
</div>
</div>
</div>
and serviceData.json
[{
"id": 1,
"name": "Reparation",
"Description": "Reparation of your hardware"
}, {
"id": 2,
"name": "Installation",
"Description": "Installation of your hardware"
}, {
"id": 3,
"name": "Reparation and Reset",
"Description": "Reparation and Reset of your hardware"
}]
But I have this error in console
angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=9&p3=serv.id%20%3A%20service.name&p4=%3A%20service.name
and anything display in screen.
Thank you for help !

You have to use the following line:
<h3>{{ serv.id : serv.name }}</h3>
like this:
<h3>{{ serv.id}} : {{serv.name }}</h3>

AngularJS Routing based on Checkbox Selection

I am trying to learn Angular JS with an HTML Sample. I would like the user to fill out some basic information, and based on the checkbox they select, it will load a form page using the UI Routing. It will generate links to navigate the page automatically, based on the checkboxes selected. Then, once the form is complete it should save in a directory on the server, and download to the user computer.
I got the form to show all data as json array, but now nothing is working after trying to add the ability to create the checklist links, as navigation, and saving?
App.js
create our angular app and inject ngAnimate and ui-router
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: 'form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile'); })
// our controller for the form //
.controller('formController', function ($scope) {
// we will store all of our form data in this object
$scope.prefContactArray = [];
$scope.prefContactArray.push({ name: "Text", reply: "Great we'll text you.", isDefault: false });
$scope.prefContactArray.push({ name: "Email", reply: "Great we'll send you an email!", isDefault: false });
$scope.prefContactArray.push({ name: "Phone", reply: "Great we'll give you a call.", isDefault: false });
$scope.selectedprefContact = $scope.prefContactArray.name;
$scope.selectedprefContactReply = $scope.prefContactArray.reply;
$scope.fruitsList = [
{ id: 1, name: 'Apple', url: 'form/profile.html', state:'.profile' },
{ id: 2, name: 'Banana', url: 'form/interests.html', state:'.interests' },
{ id: 3, name: 'Guava', url: 'form/payment.html', state:'payment' }
];
$scope.selected = {
fruitsList: []
};
$scope.checkAll = function () {
$scope.selected.fruitsList = angular.copy($scope.fruitsList);
};
$scope.uncheckAll = function () {
$scope.selected.fruitsList = [];
};
$scope.create = function () {
var aTag = document.createElement('a ui-sref-active="active" ui-sref="fruitsList.state"
alt="fruitsList.name"');
status-buttons.appendChild(aTag);
$state.go($scope.selected.fruitsList.url);
};
$scope.formData = {};
$scope.submit = function downloadFile(fileName, urlData) {
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click");
aLink.download = fileName;
aLink.href = urlData;
aLink.dispatchEvent(evt);
}
var data = $scope.formData;
downloadFile('test.csv', 'data:text/csv;charset=UTF-8,' + encodeURIComponent(data));
});
Form.html
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<div id="splitscreen">
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="createQuote()">
<div id="userPanel" class="col-md-6" style="background-color:#999; z-index:2;">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" ng-model="formData.email">
</div>
<div class="form-group">
<label for="email">Phone</label>
<input type="text" class="form-control" name="email" ng-model="formData.phone">
</div>
<div class="form-group">
<label for="email">Website</label>
<input type="text" class="form-control" name="email" ng-model="formData.web">
</div>
<div ng-repeat="prefContact in prefContactArray">
<label>
<input type="radio" ng-value="prefContact.reply" ng-model="$parent.selectedprefContact" />
{{prefContact.name}}
</label>
</div>{{selectedprefContact | json}}
<div>
<label ng-repeat="fruit in fruitsList">
<input type="checkbox" checklist-model="selected.fruitsList" checklist-value="fruit.id"
ng-click="create()" /> {{fruit.name}}<br />
</label>
<button ng-click="checkAll()">Check all</button>
<button ng-click="uncheckAll()">Uncheck all</button> <br />
{{selected.fruitsList}}
</div>
</div>
</div>
<pre>
{{ formData }}
</pre>
<div id="questions" class="col-md-6">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</div> </form>
</div>
</div>
<!-- show our formData as it is being typed -->
Submit Button Page
Thanks For Your Money!
<button type="submit" class="btn btn-danger">Submit</button> </div>
Index
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.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>
</head>
<!-- apply our angular app --> <body ng-app="formApp">
<div class="container col-md-12">
<!-- views will be injected here -->
<div class="col-md-12" ui-view></div>
</div>

In your create() function you use $state.go($scope.selected.fruitsList.url) which will change to the new state, however the value is the template path rather than the state path.
You should use $state.go($scope.selected.fruitsList.state) because the 'to' parameter of $state.go() should be the name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.

$state
As #Andorov already mentioned, you need $state to navigate. UI Router has offers this service to make it easy for you to go from one state (or route, or page) to another. Add the dependency to your controller like so:
.controller('formController', function ($scope, $state) {
You are now able to say something like $state.go('form.payment') in your controller. This will navigate the person to the Payment form.
So all you would need to do now is when they submit the form (i.e. inside your $scope.createQuote() function which you haven't included in the code yet), find out what state you should go to and end with $state.go(stateToGoto).
Tip:
When I started out with UI router and AngularJs, I just made every route its own page, not using children. If you would do that you would get:
A route for your form
A route for every page it could go to.
Every route has its own controller, which makes it easy to put code in the right place. I don't like sharing the controller between children as it just makes it more difficult to understand which part of the code is for which child.
Does this help?

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?

Binding a single angular expression out of a json-file

I am pretty new to angularJS, and obviously there are some simple things that i do not yet understand. What i want to do is the following:
I've got a de-DE.json (that e.g. has several language-keys for a planned multi-language site) that looks somewhat like this
{
"index": {
"headline": "The title of that view",
"tabmenu": [
{
"id": "home",
"class": "active in",
"title":"Title No. 1",
"description":"Some description"
},
{
"id": "profile",
"class": "",
"title":"Title No. 2",
"banner":"WallBanner.jpg",
"description":"Some description"
},
{
"id": "messages",
"class": "",
"title":"Title No. 3",
"description":"Some description"
},
{
"id": "settings",
"class": "",
"title":"Title No. 4",
"description":"Some description"
}
]
},
"media": {
...
}
}
Next have a look at my index.html that looks like:
<html ng-app id="ng-app">
<head>
<title>Title of the Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
</head>
<body ng-controller="languageKey">
<div class="container" ng-model="language.index">
<h1>{{ headline }}</h1>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade {{ lg.class }}" id="{{ lg.id }}" ng-repeat="lg in language.index.tabmenu">
<h3>{{ lg.title }}</h3>
<p>{{ lg.description }}</p>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/jquery/jquery.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/angularjs/angular.min.js"></script>
<script>
$(function () {
$('#myTab a:first').tab('show')
})
function languageKey($scope, $http)
{
$http({method: 'POST', url: 'de-DE.json'}).success(function(data)
{
$scope.language = data; //response Data
});
}
</script>
</body>
</html>
So thanks to some google-knownledge the part with the <div ng-repeat="lg in language.index.tabmenu"> works fine.
But much more common are language-keys that are just used once, without repeating html structure like in the above
<h1>{{ headline }}</h1>
(I've also tried <h1 ng-bind="{headline}"
So is there a leightweight way to just call those expressions?
Obviously it doesn't work if i try ng-model="language.index" in that case.

You just have to set your JSON object in your $scope element inside your controller, and you can use it in the view:
$scope.myJSON = {...};
In HTML
<h1>{{myJSON.index.headline }}</h1>
By the way, if you're implementing a multi-language application take a look at angular-translate.

If this works
<div ng-repeat="lg in language.index.tabmenu">
then as long as you load the parsed JSON object into the $scope the same way, this should output the headline:
<h1>{{ language.index.headline }}</h1>
The docs suggest that ng-model only works with inputs:
ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope