I have a table with dynamic rows, when I press "add row" main row is copied and added to array. But when it copied - id copied too, and I don't need to change this ID.
I copy main field like this:
$scope.addRow = function() {
var copy = angular.copy($scope.item[0]);
$scope.item.push(copy)
}
validate is working like this :
ng-class='{"is-invalid": tableForm[field.id].$invalid}'
I was thinking to add second ng-form for <tr>, with dynamic name like : ng-form="{{row + $index}}", but in webstorm it highlight like error, so I guess it must be static name.. Now when I have invalid field - all column will be red (error). How can I without change ID's validate fields separately?
My plnkr example
use $index in name field
change html file in your plunker as below
<!DOCTYPE html>
<html ng-app='App'>
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='Ctrl'>
<h1>table</h1>
<table>
<thead>
<tr>
<th ng-repeat='item in item[0].field'>{{item.name}}</th>
</tr>
</thead>
<tbody ng-form='tableForm'>
<tr ng-repeat='row in item'>
<td>{{$index}}</td>
<td ng-repeat='field in row.field'>
<input type="text"
ng-model='field.value'
name='{{$index}}'
required
ng-class='{"is-invalid": tableForm[$parent+$index].$invalid}'>
</td>
<td ng-if='$index !== 0'
style='color:red;cursor:pointer'
ng-click='removeRow($index)'>X</td>
</tr>
</tbody>
</table>
<button ng-click='addRow()'>add row</button>
</body>
</html>
Related
I'm trying to use ngTable in my spring MVC/Angularjs Web application (with eclipse).
Everything seems to work fine :
retrieve external data from my #RestController in JSON format in my javascript file
displaying the table with all rows (with jsp view)
displaying sorting, filtering and pagination stuff (with jsp view)
But all rows are displayed in the first page (and not only the first 10) and when I click on table headers to sort or typing in the filter fields, nothing happens.
I followed this ngTable example but it's not working fine.
Hope you can help me. And please be lenient, it's my first post.
Here's my code :
JS :
var app = angular.module('app',["ngTable", "ngResource"]);
(function() {
app.controller ('ListeExec', ListeExec);
ListeExec.$inject = ["NgTableParams", "$resource"];
function ListeExec(NgTableParams, $resource) {
//debugger;
var svc = $resource("executions/all");
this.ExecTable = new NgTableParams({
count: 10, // count per page
sorting: { date_nj6_str : 'desc' }
},{ getData: function (params) {
return svc.query().$promise.then(function (data) {
params.total(data.length); // recal. page nav controls
return data;
});
}
});
}
})();
JSP :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Liste des exécutions NJ6</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.7.0/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script>
<script type="text/javascript" src="js/Executions_angular.js"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet"; href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.css">
</head>
<body>
<div class="container" ng-app="app" ng-controller="ListeExec as lex">
<h1>Liste des éditions de bulletins de paie NJ6</h1>
<div id="listexecutions" class="table-responsive-xl">
<table ng-table="lex.ExecTable" class="table table-bordered table-hover table-striped" show-filter="true">
<tr ng-repeat="exc in $data track by exc.nupro">
<td data-title="'#'">{{ $index + 1 }}</td>
<td data-title="'Nupro'" filter="{nupro: 'text'}" sortable="'nupro'"><a ng-href="DetailExec?nupro={{ exc.nupro }}">{{ exc.nupro }}</a></td>
<td data-title="'Nudoss ZO'" sortable="'nudoss_zo'">{{ exc.nudoss_zo }}</td>
<td data-title="'Date NJ6'" filter="{date_nj6_str: 'text'}" sortable="'date_nj6_str'">{{ exc.date_nj6_str }}</td>
<td data-title="'Société'" filter="{code_societe: 'text'}" sortable="'code_societe'">{{ exc.code_societe }}</td>
<td data-title="'Utilisateur'" filter="{code_user: 'text'}" sortable="'code_user'">{{ exc.code_user }}</td>
<td data-title="'Nombre de bulletins'" filter="{ nbre_bull: 'number'}" sortable="'nbre_bull'">{{ exc.nbre_bull }}</td>
<td data-title="'Dispatch'"><img style="width:30%; height:auto;" ng-src="{{exc.temoin_dispatch && 'img/ok-icon.png' || 'img/close-icon.png'}}"></td>
<td data-title="'Envoi Docapost'"><img style="width:30%; height:auto;" ng-src="{{exc.temoin_envoi && 'img/ok-icon.png' || 'img/close-icon.png'}}"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
And the result in the browser :
Hello I am very new to angularjs and need some help to update each row. Let's assume that User change any of the option from dropdown box or checkbox, i need to keep track of them and pass that data to backend whenever user click "Submit". How can i achieve that ?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'Need to update Row that I have changed';
$scope.submitButton = function(){
alert("please help me !!!");
}
$scope.cities = ["Austin",
"Leander",
"RoundRock"];
$scope.data = [{check:'active',firstName:'James',lastName:'Austin',city:'Leander'},
{check:'inactive',firstName:'Niki',lastName:'Jones',city:'Austin'},
{check:'active',firstName:'Amy',lastName:'Parker',city:'RoundRock'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<!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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table>
<thead>
<th>Active</th>
<th>First Name</th>
<th>Last Name</th>
<th> City</th>
</thead>
<tbody>
<tr ng-repeat="d in data">
<td><input type="checkbox" ng-checked="d.check=='active'"/>{{d.check}}</td>
<td>{{d.firstName}}</td>
<td>{{d.lastName}}</td>
<td><select ng-model="d.city" ng-change="showSelectValue(d.city)" ng-options="c for c in cities"></select></td>
</tr>
</tbody>
</table>
<button type="button" ng-click="submitButton()">Submit</button>
</body>
</html>
`I am very new to Angularjs and need help with updating the each row.
Whenever user change the value either checkbox or dropdown list, I need to keep track of them and pass that data to backend whenever user click save.
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',['$scope',function($scope){
$scope.tableData = ['hello','blue','angular'];
//set ture ok but only first time
//设置 true 可以 但是 只有第一次可以
//$scope.selectClass = true;
$scope.reset = function(){
console.log('reset');
$scope.selectClass = false;
}
}]).directive('myTd',function(){
return {
restrict : 'A',
link : function(scope,elem){
$(elem).on('click',function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
}else{
$(this).addClass('selected');
}
})
}
}
});
.selected {background: #139029;}
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.selected {background: #139029;}
</style>
</head>
<body ng-controller="myCtrl">
<div class="container-fluid">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in [1,2,3]">
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
</div>
</body>
<script src="lib/angular.1.5.5.min.js"></script>
<script src="lib/jquery.2.2.2.min.js"></script>
<script src="src/resetTable.js"></script>
</html>
i click button reset class not work, why? who can tell me. thanks very much!!
You don't need that directive (and you don't need to manipulate the DOM yorself). ng-class is itself a built-in directive that does just that.
Just delete your myTd directive and change your element to this:
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>
Actually what you want to do to achieve your requirement by preserving the directive is to remove the class selected from your table rows
To do that modify the reset function as follows
$scope.reset = function(){
$('.selected').removeClass('selected');
}
This function selects all the elements with class name selected and will remove the class from those elements
why does the following statement work but not the one after
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body ng-app>
<table ng-init='products = [{"name":"blah", "code":"ten12", "available":"yes","price":243}]'>
<thead>
<tr>
<td></td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{product.name}}</td>
<td>{{product.code}}</td>
<td>{{product.available}}</td>
<td>{{product.price}}</td>
</tr>
</tbody>
</table>
</body>
</html>
and this one does not work
<!DOCTYPE html>
<html >
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js" type="text/javascript"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body ng-app>
<table ng-init='products = [{"name":"blah", "code":"ten12", "available":"yes","price":243}]'>
<thead>
<tr>
<td></td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{products.name}}</td>
<td>{{products.code}}</td>
<td>{{products.available}}</td>
<td>{{products.price}}</td>
</tr>
</tbody>
</table>
</body>
</html>
the only difference i see in the above two statements is that second one is missing ng-repeat statement but products variable is initialised in both of them. so in second statement if i directly call products shouldn't it be called atleast one time?
In both of the examples, products is an array (in this case, with one item).
In the first one, you're iterating through the items in the array with ng-repeat, which works fine. In the second one, though, you are trying to display properties name, code, and so on of the array, not any of the items, and arrays do not have those properties, so nothing is displayed. (Conversely, for example, you would get a value back from products.length but not product.length, because arrays have a length property while the items don't.)
You could display the properties of the first item in the array by using
<td>{{products[0].name}}</td>
<td>{{products[0].code}}</td>
<td>{{products[0].available}}</td>
<td>{{products[0].price}}</td>
instead. But that'll do exactly that, only display the first one. You need to use ng-repeat as in the first example if you want to display the data for each of them dynamically.
I am trying to type the text in a text box and I need to select this value for filtering. How can I select the text box value in angularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="specialists = [{name:'aaaa', id:'555-1276'},
{name:'bbbb', id:'800-322-435'},
{name:'cccc', id:'555-4321'},
{name:'dddd', id:'555-5678'},
{name:'eeee', id:'555-8765'},
{name:'ffff', id:'555-3212'}
]"></div>
<label>Search: <input ng-model="user.specialistSearch"></label>
<table>
<tr><th>Name</th></tr>
<tr ng-repeat="specialist in specialists | filter:user.specialistSearch">
<td>{{specialist.name}}</td>
</tr>
</table>
<hr>
</body>
</html>
here when im trying to type the text i need select the value.How can i select the text box value in angular js
you have to just try this ....
<div ng-init="specialists = [{name:'aaaa', id:'555-1276'},
{name:'bbbb', id:'800-322-435'},
{name:'cccc', id:'555-4321'},
{name:'dddd', id:'555-5678'},
{name:'eeee', id:'555-8765'},
{name:'ffff', id:'555-3212'}
]"></div>
<p><input type="text" ng-model="test"></p>
<table>
<tr><th>Name</th></tr>
<tr ng-repeat="specialist in specialists | filter:test">
<td>{{specialist.name}}</td>
</tr>
</table>