I am stuck on a problem.
I want to take first and last names as Input show them as full names and add them separately on a table by push method. Full name function is working properly but another controller is either not working or showing the results.
<!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.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" ng-submit="addRow()">
First Name: <input type="text" name="fname" ng-model="firstName"><br>
Last Name: <input type="text" name="lname" ng-model="lastName"><br>
<input type="submit" value="Submit"><br>
</form>
<p> Full Name: {{fullName()}}</p>
<div ng-controller="tableCtrl">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="x in records">
<td>{{x.firstName}}</td>
<td>{{x.lastName}}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = myForm.fname.value;
$scope.lastName = myForm.lname.value;
$scope.fullName = function () {
return $scope.firstName + " " + $scope.lastName;
};
});
app.controller('tableCtrl', ['$scope', function ($scope) {
$scope.records = [];
$scope.addRow = function () {
$scope.records.push({
'firstName': $scope.firstName,
'lastName': $scope.lastName
});
};
}]);
</script>
</body>
</html>
This is the code of the index.html file I am using Angular js with a CDN link.
Related
I have an ng-repeat that iterates over a document where I want to do a " | filter:search", but want the filter to run on specific fields in the document.
I found a couple examples, that just don't work.
(I have an input field with a model=search)...
The way they say you target specific fields is like this:
<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>
I remember doing something in the past and I think this is close, but not quite.
Any help?
<div ng-repeat="obj in objs | filter:filterFn">{{obj.name}}</div>
see this is the function : filterFn
$scope.filterFn = function(elm)
{
if($scope.filterlocation[elm.location])
{
return true;
}
return false;
};
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
first_name: 'Programmer',
last_name: '21',
},{
first_name: 'Abc',
last_name: 'Xyz'
},{
first_name: 'Kunvar',
last_name: 'Singh'
},{
first_name: 'Cnak',
last_name: '2'
}
];
})
})();
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="angular-filter#0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
<table>
<tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText">
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they
will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
</body>
</html>
This is an example for a table to search for eachColumn and for all colums in an input all.
Heres the example ->pnlkr
All can be done in the view.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as rchCtrl">
<div>
<label>Search</label>
<input ng-model="searchAll">
<hr>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-model="searchID">
</td>
<td>
<input ng-model="searchName">
</td>
<td>
<input ng-model="searchAge">
</td>
</tr>
<tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.peoples = [
{id:1, name:'Kalesi', age:50},
{id:2, name:'Jon', age:43},
{id:3, name:'Jonas', age:34},
{id:4, name:'Sam', age:29},
{id:5, name:'Samuel', age:50},
{id:6, name:'Tyrion', age:20}
];
});
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hello all I am new in angularJs. I want to update single row in table instead of whole table after editing it in a form.
Here I am trying to create a table without ng-repeat.
plnkr
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title>My ParseApp site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
<table>
<tr ng-repeat="info in infos">
<td ng-hide="info.update" ng-bind="info.name"></td>
<td ng-show="info.update">
<input type="text" ng-model="info.name" />
</td>
<td>
<button ng-click="updateMe(info)">click to edit</button>
</td>
</tr>
</table>
<script>
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.infos = [{
name: "user1"
}, {
name: "user2"
}, {
name: "user3"
}, {
name: "user4"
}];
$scope.updateMe = function(object) {
object.update ? object.update = false : object.update = true;
}
})
</script>
</body>
</html>
Final solution..
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title>My ParseApp site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
<form ng-show="update">
user <input type="text" ng-model="upname.name" /> <button ng-click="updateTable(upname)">save</button>
</form>
<table>
<tr ng-repeat="info in infos">
<td ng-bind="info.name"></td>
<td ng-bind="info.lastname" ></td>
<td>
<button ng-click="updateMe(info)">click to edit</button>
</td>
</tr>
</table>
<script>
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.infos = [{
name: "user1",id:0,lastname:"abc"
}, {
name: "user2",lastname:"abc",id:1
}, {
name: "user3",lastname:"abc",id:2
}, {
name: "user4",lastname:"abc",id:3
}];
$scope.updateMe = function(object) {
$scope.upname = object;
$scope.update=true;
}
$scope.updateTable = function(object){
}
})
</script>
</body>
</html>
What i need is when i change the value from child window textbox the reflect should appear on parent window records in a table. And here is my parent.html.
-----index.html--------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<form method=post action='' name=f1>
<table border="1" >
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th> Edit here</th>
</tr>
<tr ng-repeat="person in people">
<td><span id="d" name='p_name'>{{person.id}}</span></td>
<td><span id="c" name='q_name'>{{person.name}}</span></td>
<td><span id="e" name='r_name'>{{person.age}}</span></td>
<td>Edit</td>
</tr>
</table>
</form>
</div>
</div>
<script>
var myApp=angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$window) {
$scope.people = ([
{
id: 1,
name: "Peter",
age: 21},
{
id: 2,
name: "David",
age: 20},
{
id: 3,
name: "Anil",
age: 22}
])
$scope.foo = function() {
$window.open('index1.html');
};
});
</script>
And here is my child window:
------index1.html-------
<!DOCTYPE html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script>
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
opener.document.f1.q_name.value = document.frm.d_name.value;
opener.document.f1.r_name.value = document.frm.e_name.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body ng-app="mainApp" >
<div ng-controller='childController'>
<form name="frm" method=post action=''>
<table border="0">
<tr><td>Enter id:</td><td><input id="d" type="text" name="c_name" ></td></tr>
<tr><td>Enter name:</td><td><input id="c" type="text" name="d_name" ></td></tr>
<tr><td>Enter age:</td><td><input id="e" type="text" name="e_name" ></td></tr>
<tr><td><button onclick="post_value();">Save</button></td></tr>
</table>
</form>
</div>
</body>
</html>
And here is my plunker: http://plnkr.co/edit/qF2zvp0VYY9wMvWzt3XK?p=preview
You shouldn't open details in other window. Then you can't persist data in your app because there is no way to communicate between two windows.
I don't think so you should make this thing this complicated as you can make you app as SPA (Single Page Application), For that you need to use ng-route which will dynamically load the pages on basis of url changes.
Using below html
<div ng-view></div>
Then you need write configuration for you app, when to load which template with which controller
Config
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/people', {
templateUrl: 'people.html',
controller: 'PeopleCtrl'
})
.when('/people/:id', {
templateUrl: 'details.html',
controller: 'detailsCtrl'
})
.otherwise({
redirectTo: '/people'
});
}
]);
Working Plunkr here
I am trying to iterate with ng-repeat, using data served from a REST service.
It works perfectly when the data is a single Json object, but when it comes to be a list of objects the HTML doesn't get the data.
Here is the code:
hello.js
function Hello($scope, $http) {
$http({ method: 'GET', url: 'http://devfz.azurewebsites.net/api/providers' }).
success(function (data) {
$scope.providers = [data];
}).
error(function () {
alert("Error");
});
}
index.html
<!DOCTYPE html>
<html ng-app 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">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/hello.js"></script>
<title>Bootstrap 101 Template</title>
</head>
<body role="document" style="padding-top: 70px; padding-bottom: 30px">
<div class="container theme-showcase" role="main">
<div class="jumbotron">
<div ng-controller="Hello">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th style="min-width: 80px;">Id</th>
<th style="min-width: 80px;">Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="provider in providers">
<td>{{provider.id}}</td>
<td>{{provider.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Thanks so much :)
Your providers array contains a single element:
$scope.providers = [data]; // array containing a single element: data
If a JSON array is returned by the server, and you want to iterate over that array, then the code should be
$scope.providers = data;
after the controller definition make array providers
$scope.providers = [];
and in success callback concat data.
.success(data) {
$scope.providers = $scope.providers.concat(data)
}