Trying to run a function in a clientside controller file using ng-click on a button in my HTML. Getting nothing and not sure why. All help appreciated.
HTML
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="criminals in criminals.criminalArray">
<strong>{{criminals.name}}</strong> <em>{{criminals.location}}</em>
<span class="status {{criminals.status}}">{{criminals.status}}</span>
<button ng-click="criminals.criminalsDelete(criminal)" class="delete">X</button>
</li>
</ul>
CONTROLLER
vm.criminalsDelete = criminalsDelete;
function criminalsDelete(criminal) {
console.log('ng-click');
$http.delete(`http://localhost:4000/api/criminals/${criminal.id}`)
.then(() => {
const index = vm.criminalArray.indexOf(criminal);
vm.criminalArray.splice(index, 1);
});
}
The criminals name for the controllerAs syntax is being hidden by the criminals name for the ng-repeat iterator. Use something else for the iterator:
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="perp ̶c̶r̶i̶m̶i̶n̶a̶l̶s̶ in criminals.criminalArray">
<strong>{{perp.name}}</strong> <em>{{perp.location}}</em>
<span class="status {{perp.status}}">{{perp.status}}</span>
<button ng-click="criminals.criminalsDelete(perp)" class="delete">X</button>
</li>
</ul>
This form of code the controller for delete is best
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
I made a Complete CRUD for you for an example, you only have to put the http services.
See the snippet below.
angular.module('App', []).controller('CrudCriminal', ['$scope',
function($scope) {
$scope.Criminals = [
{
name : "walter",
location : "abq",
status : "dead",
editable : false
},
{
name : "Jesse",
location : "nebraska",
status : "out",
editable : false
}
];
$scope.entity = {}
$scope.edit = function(index){
$scope.entity = $scope.Criminals[index];
$scope.entity.index = index;
$scope.entity.editable = true;
}
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
$scope.save = function(index){
$scope.Criminals[index].editable = false;
}
$scope.add = function(){
$scope.Criminals.push({
name : "",
location : "",
status : "",
editable : true
})
}
}
]);
/* Styles go here */
body{
margin:10px;
font-size:14px;
font-family:Arial;
}
table{
border:1px solid #333;
border-collapse:collapse;
width:100%;
}
table tr td{
border:1px solid #333;
padding:10px;
}
table tr td span{
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App">
<div ng-controller="CrudCriminal">
<h1>Infamous Criminals</h1>
<table>
<tr>
<td>Name</td>
<td>Location</td>
<td>Status</td>
<td><span ng-click="add()">Add New</span></td>
</tr>
<tr ng-repeat="criminal in Criminals">
<td>
<input type="text" ng-model="criminal.name" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.name }}</span>
</td>
<td>
<input type="text" ng-model="criminal.location" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.location }}</span>
</td>
<td>
<input type="text" ng-model="criminal.status" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.status }}</span>
</td>
<td>
<span ng-click="edit($index)" ng-hide="criminal.editable">Edit</span>
<span ng-click="save($index)" ng-show="criminal.editable">Save</span>
<span ng-click="delete($index)"> | Delete</span>
</td>
</tr>
</table>
</div>
</body>
</html>
Related
I have an HTML file which displays 2 lists using AngularJS file with 2 controllers and a service. The lists are arrays which are being correctly updated in the model, as evidenced by the console.log output. But the HTML doesn't display the updated list2 (data stored in the angularJS service). Can someone tell where I am going wrong?
Tried looking at the API, angular directives, Controller As syntax and inheritance concepts.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ShoppingListCheckOff">
<head>
<title>Shopping List Check Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
<style>
.emptyMessage {
font-weight: bold;
color: red;
font-size: 1.2em;
}
li {
margin-bottom: 7px;
font-size: 1.2em;
}
li > button {
margin-left: 6px;
}
button > span {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>Shopping List Check Off</h1>
<div class="row">
<!-- To Buy List -->
<div class="col-md-6" ng-controller="ToBuyController as toBuy">
<h2>To Buy:</h2>
<ul>
<li ng-repeat="item in toBuy.list">
Buy {{ item.name }} {{ item.quantity }}
<button ng-click="toBuy.bought($index)" class="btn btn-default">
<span class="glyphicon glyphicon-ok"></span> Bought
</button>
</li>
</ul>
<div ng-if="!toBuy.list.length" class="emptyMessage">Everything is bought!</div>
</div>
<!-- Already Bought List -->
<div class="col-md-6">
<h2>Already Bought:</h2>
<ul>
<li ng-repeat="item in bought.list">Bought {{ item.quantity }} {{ item.name }}</li>
</ul>
<div ng-if="!bought.list.length" class="emptyMessage">Nothing bought yet.</div>
</div>
</div>
</div>
</body>
</html>
App.js
(function() {
'use strict';
angular
.module('ShoppingListCheckOff', [])
.controller('ToBuyController', ToBuyController)
.controller('AlreadyBoughtController', AlreadyBoughtController)
.service('ShoppingListCheckOffService', ShoppingListCheckOffService);
ToBuyController.$inject = ['ShoppingListCheckOffService'];
function ToBuyController(ShoppingListCheckOffService) {
var toBuy = this;
toBuy.list = ShoppingListCheckOffService.getList(1);
toBuy.bought = function(itemIndex) {
ShoppingListCheckOffService.transfer(itemIndex);
};
}
AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
function AlreadyBoughtController(ShoppingListCheckOffService) {
var bought = this;
bought.list = ShoppingListCheckOffService.getList(2);
}
function ShoppingListCheckOffService() {
var service = this;
// List of shopping items
var list1 = [
{ name: 'Cookies', quantity: 10 },
{ name: 'Bananas', quantity: 100 },
{ name: 'Toys', quantity: 6 },
{ name: 'Dildos', quantity: 300 },
{ name: 'Yaakovs', quantity: 1 }
];
var list2 = [];
service.transfer = function(itemIndex) {
list2 = list2.concat(list1.splice(itemIndex, 1));
console.log('List 1', list1);
console.log('List 2', list2);
};
service.getList = function(num) {
if (num == 1) {
return list1;
}
if (num == 2) {
return list2;
}
};
}
})();
The issue is that concat does not change the original array. It creates a new array. When you do list2 = list2.concat(list1.splice(itemIndex, 1)); you are setting list2 to a new array but bought.list is still set to the old array so it doesn't change.
One solution would be to
replace
list2 = list2.concat(list1.splice(itemIndex, 1));
with
list2.push(list1.splice(itemIndex, 1)[0]);
i have an array like so :
TestingTable : [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
]
I want to use the above array and create a div table like this :
So far ive tried it this way but its not coming the way i want it to ..
<h3>Testing</h3>
<div class="rTable" ng-if="show" ng-repeat="item in TestingTable">
<div class="rTableRow">
<div class="rTableHead"><strong></strong>
</div>
<div class="rTableHead" ng-repeat="test in item.EnvironmentTypes"><span style="font-weight: bold;">{{test.Name}}</span>
</div>
</div>
<div class="rTableRow" ng-repeat="environ in item.TestingType">
<div class="rTableHead"><span style="font-weight: bold;">{{environ.Name}}</span>
</div>
<div class="rTableCell" ng-repeat="test in item.EnvironmentTypes">
<input type="text" ng-model="result">
</div>
</div>
</div>
How should i use the ng repeat in order to get the two tier table in the picture?
angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
$scope.TestingTable = [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
];
}])
table, th, td {
border: 1px solid #2b91d6;
border-collapse: collapse;
}
thead tr{
background-color:#97cff5;
text-align:center;
}
td{
width:130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<table>
<thead>
<tr>
<td></td>
<td ng-repeat='item in TestingTable[1].EnvironmentTypes'>{{item.Name}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in TestingTable[0].TestingType'>
<td style='text-align:right'>{{item.Name}}</td>
<td ng-repeat='x in TestingTable[1].EnvironmentTypes'></td>
</tr>
</tbody>
</table>
</div>
See this solution
In your template file
<body ng-controller="MainCtrl">
<table>
<tr>
<th></th>
<th ng-repeat="item in data[1].EnvironmentTypes">{{item.Name}}</th>
</tr>
<tr ng-repeat="item in data[0].TestingType">
<td>{{item.Name}}</td>
<td ng-repeat="item1 in data[1].EnvironmentTypes"></td>
</tr>
</table>
</body>
In your controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
];
});
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO
i tried an html program for checking validation for empty field but it does't working?
please help me to show what is the error in my code?
the code snippet is below..
i tried an html program for checking validation for empty field but it does't working?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body
{
padding: 10px;
font-family:Calibri;
font-size:12pt;
}
td
{
padding:5px;
}
input
{
font-family:Calibri;
font-size:12pt;
}
span
{
font-family:Calibri;
font-size:9pt;
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<table>
<tr>
<td>First Name:
</td>
<td><input type='text' id='txtFName' class="required"/ >
</td>
</tr>
<tr>
<td>Last Name:
</td>
<td><input type='text' id='txtLName' class="required"/ >
</td>
</tr>
<tr>
<td>Age:
</td>
<td><input type='text' id='txtAge'/ >
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input type='text' id='txtEmail' class="required"/ >
</td>
</tr>
<tr>
<td colspan="2" style='text-align:center;'><input type="button" id="btnSubmit" value=" Submit ">
</td>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function() {
$('#btnSubmit').click(function(e)
{
alert("hai");
var isValid = true;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
else
alert('Thank you for submitting');
});
});
</script>
Add the Jquery library first before the plugin, check this fiddle.
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Include jQuery library in your head tag and try.
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Web application frameworks and tools are becoming smarter day by day, if the web-developers-community needs a change in framework/tools which is widely accepted and common, it gets adopted and rolled out, and all such tools have become so much web-developer's friendly today, specially Rails, jQuery etc, now you just need to google your wish, and you will find some plug-able, minimum setup/config libraries waiting for you to try out :)
So in this case just google for html form inputs validations.
I have a table of one row with two columns.I want to align content of second column to right...My content is not aligned to right..Can you check that what is wrong there.......
Here is my code....
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css"> <style>
table td{
border:1px solid green;
}
#Paginator ul{ margin:0px;padding:0px;}
#Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none;float:left;margin:2px;padding:4px 8px 2px 8px;border:1px solid black;cursor:pointer;}
#Paginator ul li,#PrevPage{display:none;}
</style>
<body>
<table style="border:1px solid red;width:100%"><tr>
<td>
<b style="float:left;">Number of Matching Addresses: 49  Number of pages: 5</b>
</td>
<td align="right">
<script>
var ga_pageId = new Array();
function pageNavigate(){if(document.getElementById("FromPage")){ var fromPage = parseInt( document.getElementById("FromPage").value);} if(document.getElementById("ToPage")){var toPage = parseInt( document.getElementById("ToPage").value);}if(fromPage == 1){document.getElementById("PrevPage").style.display="none";} else{ document.getElementById("PrevPage").style.display="inline"; }if(toPage == 5 || toPage<5){document.getElementById("NextPage").style.display="none";}else{ document.getElementById("NextPage").style.display="inline"; }for(var j=0;j<ga_pageId.length;j++){if(document.getElementById(ga_pageId[j])){document.getElementById(ga_pageId[j]).style.display="none"}}for(var i=fromPage;i<=toPage; i++){ var pageId = 'PAGE_'+i;if(document.getElementById(pageId))document.getElementById(pageId).style.display="inline"; }}
function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value = parseInt(toPageEle.value) - 1;pageNavigate();}}
function nextPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value = parseInt(toPageEle.value) + 1; pageNavigate();}}
function pageOver(lv_this){if(lv_this.selected!='X')lv_this.style.backgroundColor = "#52CFCF";}
function pageOut(lv_this){if(lv_this.selected!='X')lv_this.style.backgroundColor = "#E6EFFA";}
</script>
<div id="Paginator">
<input type="hidden" id="FromPage" value="1"/>
<input type="hidden" id="ToPage" value="5 "/>
<ul >
<li onClick="previousPage()" id="PrevPage"><span>PREV</span></li>
<script> ga_pageId.push('PAGE_1');</script>
<li id="PAGE_1">1 </span></li>
<script> ga_pageId.push('PAGE_2');</script>
<li id="PAGE_2" >2 </span></li>
<script> ga_pageId.push('PAGE_3');</script>
<li id="PAGE_3" >3 </span></li><script> ga_pageId.push('PAGE_4');</script>
<li id="PAGE_4">4 </span></li>
<script> ga_pageId.push('PAGE_5');</script>
<li id="PAGE_5">5 </span>
</li>
<li onClick="nextPage()" id="NextPage" style="display:none"><span>NEXT</span></li>
</ul> </div>
<script> pageNavigate()</script>
</td>
</tr>
</table>
</body></html>
Add this css:
#Paginator ul{ margin:0px;padding:0px; float:right;}
You already have answer in your previous <TD> Tag style="float:left;".
Why you are not using same for 2nd <TD>?
You can use the Following options
1. <td style="float:right;">
2. <div id="Paginator" style="float:right;" >
3. #Paginator ul{ margin:0px;padding:0px; float:right;}
Because your content is wrapped in a div. The div expands to the size of the td and the content in it is aligned left. Add text-align: right to the Paginator ul li style.