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>
Related
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.
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>
In my angularjs application have an array of objects as shown below :
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}]
Now on a click event I need to update 'itemHr' of each object in the array to some new value let say (25). I don't want to create new Array of object rather modify the existing only. If we can use angularjs utilities to do it or underscore library, both are fine for me. can any one help me with that.
Why not vanila js with for loop?
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
or underscore
_.each($scope.rowData, function(item){ item.itemHr = 25;});
or angular
angular.forEach($scope.rowData,function(item){ item.itemHr = 25; });
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller("maincontroller", function($scope) {
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}];
$scope.update = function(){
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
}
});
<!doctype html>
<html lang="en" ng-app="myApp" ng-controller="maincontroller">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<script data-require="angular-bootstrap#0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<table class="table table-hover table-bordered" >
<tbody >
<tr ng-repeat="row in rowData">
<td>
{{row.expNum}}
</td>
<td>
{{row.itemHr}}
</td>
<td>
{{row.highRe}}
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" class="btn btn-danger" ng-click="update()" value="Update ItemHr to 25">
</body>
</html>
angular.forEach($scope.rowData, function(item,index){
item["itemHr"] = "25";
})
How do I get $scope.animal to update when clicking the radio button?
http://plnkr.co/edit/5ikIYfXQw4GyjRKScD7x?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.animals = {
dog: {
label: "Dog"
},
cat: {
label: "Cat"
},
bird: {
label: 'Bird'
}
};
$scope.animal = 'dog';
});
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="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="(key, val) in animals">
<label>
{{val.label}}
<input type="radio" name="animal" value="{{key}}" ng-model="animal">
</label>
</li>
</ul>
<p>Animal: {{animal}}</p>
</body>
</html>
When you click the radio button, it should say the name of the animal you just clicked on.
Because ngRepeat creates a different scope, you can either use $parent
<input type="radio" name="animal" value="{{key}}" ng-model="$parent.animal">
or use an object:
<input type="radio" name="animal" value="{{key}}" ng-model="animal.name">
Controller:
$scope.animal = {
name : "dog"
};