angular console error loading image within expression binding - angularjs

Goole chrome is giving this error
http://localhost:63342/an1/images/%7B%7Bitem.image%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)
But I am able to see "left image" fine when the app is run.
//---mainMenu.json----------------------------------------
[
{
"name": "item1",
"image": "abc"
},
{
"name": "item2",
"image": "abc"
},
{
"name": "item3",
"image": "abc"
}
]
//---index.html----------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/an1/">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<main ng-view></main>
</body>
</html>
//---mainMenu.html----------------------------------------
<section class="mainMenu">
<ul>
<li ng-repeat="item in menuItems" ng-click="mainMenuSelection(item.name)">
<image src="images/{{item.image}}.png"></image>
{{item.name}}
</li>
</ul>
</section>


The browser is trying to load your unparsed template variable as a url before the desired item.image value is substituted in.
You can fix this by using ng-src instead of src on your image tag: https://docs.angularjs.org/api/ng/directive/ngSrc.

Related

Bootstrap tree-view: Tree doesn't show up

I'm new to tree-view, I'm trying to show a basic tree but it doesn't work and I don't know where I made the mistake.
I made test.html that follow the same structure of my basic.html (I'm sparing you code of the navbar, alerts, etc). I have other js functions in functions.js that work fine.
test.html:
{% csrf_token %}
{% load groupfilter %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'bootstrap-treeview.min.css' %}">
<script src="{% static 'bootstrap-treeview.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div class="container">
<div id="tree"></div>
</div>
<!-- JavaScript functions -->
<script src="{% static 'functions.js' %}"></script>
</body>
</html>
extract of functions.js:
$(function(){
var mytree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
}
];
$('#tree').treeview({data: mytree});
});

Can you share sample link that you are following?
It seems like you are importing Twitter Bootstrap 4.3.1
But as I know, Offical Bootstrap still not provide TreeView on their document.

Unable to fetch data using Http Get request in angular JS

I am trying to fetch data in AngularJS using Http Get request. I have created a separate controller.js file where I have implemented Http get service.
I have created a database.json file within the app.When I am trying to run my app on http-server, I am unable to fetch data from the data file created.
I am getting the following error in my console.
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--Route Guard -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-controller="datactrl">
<ul>
<h4>Name And Age Of The persons</h4>
<li ng-repeat="person in persons">
{{ person.Name+ ':' + person.Age }}
</li>
</ul>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", [ ]);
app.controller('datactrl', function($scope, $http) {
$http.get('http://127.0.0.1/AngularJS/HttpGet/database.json')
.then(function(response) {
$scope.persons = response.records;
});
});
database.json:
{
"records": [
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
}
]
}
Can anybody please help me to resolve this issue..?

How to use ng-repeat track by using ClientID inside Json

This is the code which i have in my controller..I have used 2 elements in the json and passed it to scope.
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Service</title>
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-material.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
There is not output comes in the html page, searched all examples and stackoverflow solutions, but i can't find the exact solutions guys, Please help me guys..

You have array in array at $scope.response
just use only one array
$scope.response= [{...},{...}]
or chose first element in array at template (if you cant change $scope.response)
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Service</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.jss"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>

It's because response is an array of an array not just a single dimension array get rid of the extra angle brackets:
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
{
"VisitName":"Brand",
"ClientName":" Software Solutions",
"POC":"Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}
];
});

angular schema form datepicker

I'm brand new to using Angular JS so forgive me if this is a basic question. I'm having problems using the date picker add on with Angular Schema Form (http://schemaform.io) I've followed the instructions on the datepicker github page, but I simply can't get a datepicker to display on my page. Here is a snippet of the code I've been using. Can anyone help or suggest any mistakes I've made?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unilever Data Centre Site Survey</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/jscript" src="bower_components/jquery-2.1.4.min.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.date.js"></script>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.css"> </link>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.date.css"> </link>
</head>
<body ng-app="test" ng-controller="TestCtrl">
<nav class="navbar navbar-default"> </nav>
<div style="width:950px;" class="container-fluid">
<div ng-controller="TestCtrl">
<form name="test" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(test,modelData)">
</form>
<h3>Model</h3>
<div>{{prettyModel}}</div>
<script>
angular.module('test',['schemaForm']).controller('TestCtrl', function($scope,$http){
$scope.schema = {
"type": "object",
"properties": {
"birthDate": {
"title": "Bday",
"type": "string",
"format": "date"
},
$scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
},​
$scope.model = {};
$scope.$watch('model', function(value){
if (value) {
$scope.prettyModel = JSON.stringify(value, undefined, 2);
}
}, true);
})
</script>
</div>
</body>

It's don't work because Textalk/angular-schema-form-datepicker is missing.
You need to install angular-schema-form-datepicker
https://github.com/Textalk/angular-schema-form-datepicker

Chrome extension add iframe and access parent window content

I inject a iframe from content script into a page. The iframe run an angular application. I want to access the parent window's content from this angular script. How can I do it?
Partial manifest.json
"content_scripts": [
{
"css": [
"css/inject.css"
],
"js": [
"scripts/inject.js"
],
"run_at": "document_end",
"all_frames": false
}
],
"web_accessible_resources": [
"frame.html"
]
frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/angular-csp.css" type="screen">
<title>name</title>
</head>
<body>
<div class="popup" ng-app="popup" ng-csp>
<div ui-view></div>
</div>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
</body>
</html>

You can't do it directly; cross-origin restrictions apply.
Instead, you need to message your content script to manipulate/query the page for you.

Resources