I have following html file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="list.css">
</head>
<body class="body" ng-app="myApp" ng-controller="FirstController as ctrl">
<div>
<input type="text" ng-model="inputText">
</div>
<first-tag></first-tag>
</body>
</html>
In this I have an element directive called first-tag.
Following is my js file:-
var app=angular.module('myApp',[]);
app.controller('FirstController',function($http){
var self=this;
$http.get("data.json").success(function(response){
self.data=response.records;
})
})
app.directive('firstTag',function(){
return{
restrict:'E',
replace:true,
templateUrl:'template.html',
controller:'FirstController',
controllerAs:'ctrl'
}
})
In my directive i have declared template.html as the templateURL. Can someone tell me why is following content not working properly in the code?
<table>
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<tr>
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</div>
</table>
Following seems to be working fine though:-
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<p>Name:{{message.modelName}}</p>
<p>Brand:{{message.modelBrand }}</p>
<img src="{{message.imageUrl}}" width="auto" height="auto">
</div>
I want to print above contents in a table.
I think it should be:
<table>
<tr class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img ng-src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</table>
Related
I have a simple table and every next row is added by clicking "Append" button.
I need to highlight matches between search input field with table input fields.
Trying to use highlight filter to achieve this, but it it runs with an error:
"TypeError: Cannot read property 'replace' of undefined"
How could I fix it? Example code below:
var app = angular.module("myApp",[]);
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
$scope.arr = [];
$scope.append = function(){
var x = {};
x.data1 = "";
x.data2 = "";
$scope.arr.push(x);
};
}]);
<!DOCTYPE html>
<html>
<head>
<title>Author's List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-controller="myCtrl" ng-app="myApp">
<div class="container">
<div class="btn-group">
<button ng-click ="append()" type="button" class="btn btn-default">Append</button>
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<div ng-repeat="x in arr | filter:search.text" ng-bind-html="x.text | highlight:search.text"></div>
</ul>
</div>
<form name ="myForm" novalidate>
<table class="table table-bordered">
<tr>
<th>data1</th>
<th>data2</th>
</tr>
<tr ng-repeat="x in arr">
<td><input ng-model="x.data1" required type="text" class="form-control"></td>
<td><input ng-model="x.data2" required type="text" class="form-control"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
The issue here is that your filter takes input text as first parameter, but you are passing a field that is not defined on your model: ng-bind-html="x.text | highlight:search.text". You have fields data1 and data2 but not text, that is why you are getting the mentioned error.
Your filter is actually working, but you have to pass a proper input parameter into it:
var app = angular.module("myApp",[]);
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
$scope.arr = [];
$scope.append = function(){
var x = {};
x.data1 = "";
x.data2 = "";
$scope.arr.push(x);
};
}]);
<!DOCTYPE html>
<html>
<head>
<title>Author's List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-controller="myCtrl" ng-app="myApp">
<div class="container">
<div class="btn-group">
<button ng-click ="append()" type="button" class="btn btn-default">Append</button>
<input type="text" placeholder="Search" ng-model="search.text">
<br style="clear: both;"/>
<ul>
<li ng-repeat="x in arr | filter:search.text">
<span ng-bind-html="x.data1 | highlight:search.text"></span>
<span ng-bind-html="x.data2 | highlight:search.text"></span>
</li>
</ul>
</div>
<form name ="myForm" novalidate>
<table class="table table-bordered">
<tr>
<th>data1</th>
<th>data2</th>
</tr>
<tr ng-repeat="x in arr">
<td><input ng-model="x.data1" required type="text" class="form-control"></td>
<td><input ng-model="x.data2" required type="text" class="form-control"></td>
</tr>
</table>
</form>
</div>
</body>
I am trying to display the JSON object in JSP page using angular js.
The Data is coming correctly but display code is not working properly in JSP page.
in app.js
$http.get(urlBase+'/users1').success(function (data){
for(var i=0;i<data.length;i++){
alert(data[i]);
}
$scope.users=data;
})
.error(function(data) {
alert("errore"+data);
$scope.data = "error in fetching data";
});
jsp file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="taskManagerApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AngularJS Task Manager</title>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="<c:url value="/resources/js/app.js"/>"></script>
</head>
<body>
<div ng-controller="taskManagerController">
<span>Add Task</span>
<div>
<div>
<table>
<tr>
<td> Name:</td>
<td><input type="text" ng-model="Name"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" ng-model="City"/></td>
</tr>
<tr>
<td>
<button ng-click="addTask()" class="btn-panel-big">Add New Task</button></td>
</tr>
</table>
</div>
</div>
<div>
<table>
<div ng-repeat="user in users">
<tr>
<td>hai {{user.id}}</td>
<td>hello {{user.Name}}</td>
<td>wellcome {{user.city}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
</html>
ng-repeat is also not working here. Is there any mistake while assigning the value to scope variable? Can anyone help me to fix this?
ng-repeat="user in users" should be added to the tr tag and not the div tag.
I am trying to do load an html page using angularJS.
My HTML page is like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TSAPI Profiles list</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="main.js"></script>
<style type="text/css">
.container{
margin: 20px;
}
</style>
</head>
<body>
<div class="container" ng-app="TSAPIProfiles" ng-controller="TSAPIController">
<div class="col-md-4">
<p> <h4> TSAPI Profiles </h4> <br><br></p>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>TSAPIProfile Name</td>
<td>ACD#</td>
<td>HUB...</td>
</tr>
<tr>
<td>AESServerPrimary</td>
<td>NorthACDTSAPI1</td>
<td>NorthACD</td>
</tr>
<tr>
<td>North</td>
<td>AESNorth1</td>
<td>ManualCBSDetails</td>
</tr>
</tbody>
</table>
<!-- Button -->
<div class="btn-group-justified" >
<div class="col-md-4" style="margin-left: 400px;" >
<button name="savebutton" class="btn btn-primary" type="button" ng-click="add()">Add</button>
<button name="resetbutton" class="btn btn-primary" type="button" ng-click="edit()">Edit</button>
<button name="cancelbutton" class="btn btn-primary" type="button" ng-click="remove()">Remove</button>
</div>
</div>
</div>
</body>
</html>
And my JS file is like:
var app = angular.module('TSAPIProfiles', [])
app.controller('TSAPIController',['$scope','$location', function ($scope,$location) {
$scope.add = function () {
$location.path('TSAPIProfileCreate.html');
}
}]);
When I click on add button it doesn't load the TSAPIProfileCreate.html. I could not able to find the reason.
Try to follow Manikandan answer because it's the right way to do this (or use ui-router), but if you really want to make a redirection like this, use : $window.location.href like this
$location.path('TSAPIProfileCreate.html'); // This is bad
$location.path returns the part of the URL after the slash NOT including search string parameters (after the question mark).
Create View then use $location.path.
https://docs.angularjs.org/api/ngRoute/directive/ngView
$location.path('TSAPIProfileCreate');
https://docs.angularjs.org/guide/$location
i am new in angularjs and nodejs, What i am doing is create a html file name of index.html and make a controller.js file in which printing a console.log message but getting error on browser in console box my code is as follow
<html ng-app>
<head>
<title> App </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container" ng-controller="AppCtrl">
<h1> Contact List App </h1>
<table class="table table-bordered">
<thead>
<tr>
<td> name </td>
<td> Email </td>
<td> mobile </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
and controller.js code is as follow
function AppCtrl() {
console.log("Hello Bro")
}
First of all you cannot call this a Angular App.
You dont have the module. Declare a module as follows,
var app = angular.module('todoApp', []);
Register a controller,
app.controller("dobController", ["$scope",
function($scope) {
}
You have not refered the angular reference.
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
console.log("Hello Bro");
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div class="col-md-20">
</div>
</body>
</html>
I have checked all the available solution but didn't help me to resolve the problem.
I have simple code but it fails to run with the mentioned error.
Here is my code
index.html
<!DOCTYPE html>
<html data-ng-app="piApp">
<head>
<script data-require="system.js#*" data-semver="0.16" src="https://jspm.io/system#0.16.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="piController">
<div class="container-
fluid">
<div class="row">
<div class="col-xs-12">
<h1> Dash Board</h1>
</div>
</div>
<div class="row">
<div
class="col-xs-12">
<table class="table table-striped table-hover">
<tbody>
<tr data-ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-="" click="getControllPanel()" class="btn btn-primary">Control Panel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the script.js
'use strict';
var app = angular.module('piApp',[]);
app.controller("piController", ["$scope",
function($scope) {
$scope.data =
[{
name: "Temperature",
value: 25
},
{
name: "Humidity",
value: 75
},
{
name: "Humidity2",
value: 75
}];
}]);
Not able to understand what is causing the mentioned error?
Do I need to have the angular.min.js locally?
Am I missing something trivial?
You have added dependency of angular2, and you have written code of angularjs
Also, you cannot use "data-ng-app" before loading the script. So remove it from html tag, and add it in body.
Add following line in head:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
and remove the first two lines which has dependency of systemjs and angular2