I'm new to angular and js. I did a table (just a header) and a button. When I click the button a new row line is added. Every cell of that row is a form text field. Everithing works fine. Now I'm trying to do a second button, when I click it must iterate over the rows and validate the fields. I'm not finding any documentation about that... so i'm not sure if this mettod (add a new row with a button) is appropiate. That's how I did it:
index.html this contains angular and my script, also contains the routes:
<html ng-app="assets">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="sources/js/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script>
var assets = angular.module('assets', ['ngRoute']);
assets.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html'
}).
when('/:tipusactius', {
templateUrl: 'tipusactius.html',
controller: 'TipusActiusCtrl'
}).
when('/:tipusactius/alta', {
templateUrl: 'tipusactius-alta.html',
controller: 'AfegirTipusActiusCtrl'
}).
otherwise({
redirectTo: '/'
});
});
assets.controller('TipusActiusCtrl', function ($scope, $http){
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/').success(function(data) {
$scope.tipus_actius = data;
});
// Ordena taula per id desc
$scope.sortField = 'idtipus_actius';
$scope.reverse = false;
});
assets.controller('AfegirTipusActiusCtrl', function ($scope, $http){
// Camps formulari text pla
$scope.nomAtribut = "<input type='text' name='firstname'>";
$scope.mida = "<input type='number' name='firstname'>";
$scope.obligatori = "<input type='checkbox' name='vehicle' value='yes'>";
// Construeix combo
$http.get('http://10.0.203.73/WS/ws.php/getCombo/1').success(function(data) {
$scope.options = data;
});
$scope.atributs = [];
$scope.addField = function() {
$scope.atributs.push($scope.atributs.length);
};
$scope.prioritat = $scope.atributs.length;
});
assets.directive('compile', compile);
function compile($compile)
{
return {
restrict: 'A',
replace: true,
link: linkFunction
};
function linkFunction(scope, element, attrs)
{
scope.$watch(
function (scope)
{
return scope.$eval(attrs.compile);
},
function (value)
{
element.html(value);
$compile(element.contents())(scope);
}
);
}
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-view></div>
</body>
</html>
And this is the view where the table is(tipusactius-alta):
<div class="row">
<div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
<button ng-click="addField()">Nou atribut</button>
<div>
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td compile="nomAtribut"></td>
<td>
<select id="tipus">
<option ng-repeat="option in options" value="{{option.idvalors_combo}}">{{option.valor}}</option>
</select>
</td>
<td compile="mida"></td>
<td>
<select id="prioritat">
<option ng-repeat="p in prioritat" value="{{p}}">{{p}}</option>
</select>
</td>
<td compile="obligatori"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
I'm not sure if this has been a good idea. I would like to find a way to iterate over the rows to read cell values, and if the values of all cells from all the rows is ok submit the values to the web service but I have no idea. Any help will be great.
You don't actually need to manipulate html directly. Just use ng-repeat over your data collection. Button should add new items to that collection and angular will create new table row in the document.
I've created small sample here: http://jsfiddle.net/Lvc0u55v/252/
var myApp = angular.module('myApp', []);
myApp.controller('tableCtrl', function($scope) {
$scope.dataTable = [{
"name": "Alex",
"lastName": "Karlov",
"age": 23,
"sex": 1
}];
$scope.options = [{
"value": 1,
"title": "Male"
}, {
"value": 2,
"title": "Female"
}];
$scope.addRow = function() {
var newItem = {
name: "",
lastName: "",
age: "",
sex: ""
}
$scope.dataTable.push(newItem);
};
});
And this is the html (I've created it based on yours code):
<div class="col-md-8" ng-controller="tableCtrl">
<button ng-click="addRow()">Add row</button>
<div>
<table class="table">
<tr>
<td>#</td>
<td>Name</td>
<td>Last Name</td>
<td>Age</td>
<td>Sex</td>
</tr>
<tr ng-repeat="item in dataTable">
<td>{{ $index + 1 }}</td>
<td>
<input type="text" ng-model="item.name" />
</td>
<td>
<input type="text" ng-model="item.lastName" />
</td>
<td>
<input type="text" ng-model="item.age" />
</td>
<td>
<select ng-options="option.value as option.title for option in options" ng-model="item.sex"></select>
</td>
</tr>
</table>
</div>
</div>
In that sample I've put all my data into dataTable variable. When I want to add one more row, I just need to add new empty object (or with predefined values) into dataTable collection. Angular will do the trick.
Related
Consider I have a list of objects like -
var configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
I use the following to search through the config list and bind the selected config to another variable called changed_config.
<table style="width:900px;">
<tr>
<th style="width:500px; margin:50px">Config Name</th>
<th style="width:150px;">Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.id" list="names">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" ng-value="option.name"> {{option.name}}
</option>
</datalist>
<td>
<input type="text" class="form-control" ng-model="changed_config.value">
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()"
class="btn btn-primary">Add Config
</button>
</div>
Controller Code(Not complete code, just relevant snippets):
var app = angular.module("drs_scheduler_app", []);
app.controller("CreateSchedulerJob", function ($scope, $http) {
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
}
Currently the code displays and binds the name of the selected config to the changed_config variable. But I need the id to be bound to the changed_config variable and the name to be displayed in the html.
If I change the <option> to use id, then id will be displayed.
How do I bind one property to a variable but show another in the html??
Here is the solution you needed,
Procedure:
When an option is selected from datalist I m checking for that
change
That change is observed through input on which datalist is added
On that input change i,e when option is selected I m assigning that
id to id key of respective changed_config
That is inturn displayed in second textbox
It works for dynamic
// Code goes here
function cntryController($scope) {
$scope.LoadSessionData=function(val)
{
console.log(val);
};
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
$scope.test = function(data, index){
console.log(data)
var newArray = $scope.configs.filter(function (config) {
return config.name == data;
});
console.log(newArray)
if(newArray.length){
var new_changed_config = $scope.changed_configs[index];
new_changed_config.id = newArray[0].id;
}
}
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-app="" ng-controller="cntryController">
<table cellspacing="10" cellpadding="10">
<tr>
<th>Config Name</th>
<th>Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.name" list="names" ng-change="test(changed_config.name, $index)">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" value={{option.name}}>{{option.name}}
</option>
</datalist>
</td>
<td>
<input type="text" class="form-control" ng-model="changed_config.id"/>
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()" class="btn btn-primary">Add Config</button>
</div>
</div>
</html>
Please run the above snippet
Here is a working DEMO
so I'm new to Angular and JS and I've been trying to do something simple with no success.
I have a table with data, everytime this data gets changed I want to make a fade in fade out animation so it blinks. I assumed I could use $watch to watch if an element changes but it's not working.
This is what I got so far:
HTML:
<tbody md-body>
<tr md-row ng-repeat="item in info.data">
<td md-cell>{{item.name}}</td>
<td md-cell>{{item.id}}</td>
<td md-cell>{{item.thing2}}</td>
<td md-cell>{{item.thing3}}</td>
<td md-cell>{{item.thing4}}</td>
<td md-cell>{{item.thing5}}</td>
</tr>
</tbody>
JS:
$scope.info = {
"data": [
{
name: "ELI 0001",
id: "123",
thing1: "thing",
thing2: "thing",
thing3: "thing",
thing4: "thing",
thing5:"thing",
},
{
name: "ELI 0001",
id: "123",
thing1: "thing",
thing2: "thing",
thing3: "thing",
thing4: "thing",
thing5:"thing",
},
]
};
I added this function to watch the entire data set for changes, and when it does I made an alert. I also added the var initialising so it doesn't show up as soon as it loads.
var initializing = true
$scope.$watch('if',function(){
if (initializing) {
$timeout(function() { initializing = false; });
} else {
alert('hey')
}
})
My problem is, how can I get it to watch all cells and execute a class that does the animation only on the data that changed?
AS this thread https://groups.google.com/forum/#!msg/angular/xZptsb-NYc4/rKAxJ3dQhbMJ, what I ended up doing was this:
app.directive('highlightOnChange', function() {
return {
link: function($scope, element, attrs) {
attrs.$observe('highlightOnChange', function(val) {
var el = $(element);
el.removeClass('blink_me ');
_.defer(function() {
el.addClass('blink_me ')
});
});
}
};
});
That is, creating a directive observes the property. You can then use it like this:
<td md-cell highlight-on-change="{{item.name}}"></td>
...
suppose your css class be:
.blink_me {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
I was working on a similar approach to #khateeb -- except I am using a $watch on the element's ng-model instead of using $observe on the directive attribute. Both work!
Plunker: https://embed.plnkr.co/rZVjPmDft997Kmny1LS4/
Snippet:
(function() {
"use strict";
var app = angular
.module('plunker', [])
.controller('MainCtrl', MainCtrl)
.directive('flashTd', flashTD);
function flashTD($timeout, $compile) {
return {
scope: {
ngModel: '='
},
link: function($scope, elem, attrs) {
// Set a watch on ng-model to wait for value change
$scope.$watch('ngModel', function(newVal, oldVal) {
if (newVal !== oldVal) {
// Flash row
// var row = angular.element(elem[0].parentNode.parentNode);
// Flash td
var td = angular.element(elem[0].parentNode);
// Using a timeout to simulate remote data change
$timeout(function() {
if (td.hasClass('flash')) {
td.removeClass('flash');
}
$timeout(function() {
td.addClass('flash')
})
}, 2000)
}
})
}
}
}
MainCtrl.$inject = ["$scope"];
function MainCtrl($scope) {
// Sample Data
$scope.info = {
"data": [{
name: "ELI 0001",
id: "123",
thing1: "thing",
thing2: "thing",
thing3: "thing",
thing4: "thing",
thing5: "thing",
}, {
name: "ELI 0001",
id: "1234",
thing1: "thing",
thing2: "thing",
thing3: "thing",
thing4: "thing",
thing5: "thing",
}]
};
}
})()
.editPencil:hover {
cursor: pointer;
}
/* https://stackoverflow.com/questions/14607695/flashing-table-row */
#keyframes flash {
from {
background-color: #ffbe76;
}
to {
background-color: inherit;
}
}
.flash {
animation: flash 1s 1;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS - Flash TD on Change</title>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h3>AngularJS - Flash TD on Change</h3>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="form">
<div class="form-group">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Id</th>
<th>Thing1</th>
<th>Thing2</th>
<th>Thing3</th>
<th>Thing4</th>
<th>Thing5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in info.data">
<td class="editPencil glyphicon-pencil text-center" style="transform: rotate(45deg)" ng-click="editRow = !editRow"></td>
<td>
<span ng-hide="editRow">{{ item.name }}</span>
<input type="text" class="input-sm" ng-model="item.name" ng-hide="!editRow" flash-td />
</td>
<td>
<span ng-hide="editRow">{{ item.id }}</span>
<input type="text" class="input-sm" ng-model="item.id" ng-hide="!editRow" flash-td />
</td>
<td>
<span ng-hide="editRow">{{ item.thing1 }}</span>
<input type="text" class="input-sm" ng-model="item.thing1" ng-hide="!editRow" flash-td />
</td>
<td>
<span ng-hide="editRow">{{ item.thing2 }}</span>
<input type="text" class="input-sm" ng-model="item.thing2" ng-hide="!editRow" flash-td />
</td>
<td>
<span ng-hide="editRow">{{ item.thing3 }}</span>
<input type="text" class="input-sm" ng-model="item.thing3" ng-hide="!editRow" flash-td />
</td>
<td>
<span ng-hide="editRow">{{ item.thing4 }}</span>
<input type="text" class="input-sm" ng-model="item.thing4" ng-hide="!editRow" flash-td />
</td>
<td>
<span ng-hide="editRow">{{ item.thing5 }}</span>
<input type="text" class="input-sm" ng-model="item.thing5" ng-hide="!editRow" flash-td />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Directive
In my demo, I'm flashing the td, but you can as easily change it to flash the target's table row by using the commented-out row variable instead of the td variable.
app.directive('flashTd', flashTD);
function flashTD($timeout, $compile) {
return {
scope: {
ngModel: '='
},
link: function($scope, elem, attrs) {
// Set a watch on ng-model to wait for value change
$scope.$watch('ngModel', function(newVal, oldVal) {
if (newVal !== oldVal) {
// Flash row
// var row = angular.element(elem[0].parentNode.parentNode);
// Flash td
var td = angular.element(elem[0].parentNode);
// Using a timeout to simulate remote data change
$timeout(function() {
if(td.hasClass('flash')) {
td.removeClass('flash');
}
$timeout(function() {
td.addClass('flash')
})
}, 2000)
}
})
}
}
}
HTML Element
<input type="text" class="input-sm" ng-model="item.thing2" ng-hide="!editRow" flash-td />
my problem is similar to thread
Dynamic table creation with ng-repeat in angularjs
JSON looks like this
{
"id": "String",
"marks" :
{
"nummin":"integer"
"nummax":"integer"
"subjectname": "string",
}
}
Just there will be an additional feature user is going to enter no of rows which need to be generated and then the table will be generated according to dynamic JSON file which will be fetched from the database. Thanks in advance
Try out this JS-Fiddle.
Let me know if this helped you!
let app = angular.module('app', []);
app.controller('ctrl', ['$scope', ($scope) => {
$scope.numberOfRows = 0;
$scope.data = [];
$scope.$watch('data', () => {
console.log($scope.data);
}, true);
}]);
app.filter('range', function () {
return function (input, total) {
total = parseInt(total, 10);
for (let i = 0; i < total; i++) {
input.push(i);
}
return input;
};
});
<div ng-app="app">
<div ng-controller="ctrl">
<input type="number" ng-model="numberOfRows" />
<br />
<table width="100%">
<tr>
<th>nummin</th><th>nummax</th><th>...</th>
</tr>
<tr ng-repeat="i in [] | range:numberOfRows">
<td>
<input type="number" ng-model="data[i].nummin" />
</td>
<td>
<input type="number" ng-model="data[i].nummax" />
</td>
<td>...</td>
</tr>
</table>
</div>
</div>
I want to call the controller function from view.
This my view:
<body>
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>Date</td>
<td>Project</td>
<td>Release</td>
<td>Feature</td>
<td>Module name</td>
<td>Hours spent</td>
<td>Comment</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/></td>
<td>
<input type="text"
datepicker
ng-model="data.date" />
</td>
<td><input type="text" ng-model="data.dept"/></td>
<td>
<select ng-model="data.release" ng-options="x for x in range">
</select>
</td>
<td>
<select ng-model="data.feature" ng-options="x for x in feature">
</select>
</td>
<td>
<input type = "text" ng-model = "data.modulename">
</td>
<td>
<select ng-model="data.hours" ng-options="x for x in hours">
</select>
</td>
<td>
<input type = "text" ng-model = "data.comment">
</td>
</tr>
</table>
<button ng-click="Submit()">Submit</button>
<table>
<tr ng-repeat="data in displayList">
<div ng-controller="Allocation as vm">
<div>{{vm.postdata(data.date)}}</div>
</div>
<p>Output Message : {{msg}}</p>
<p>StatusCode: {{statusval}}</p>
<p>Status: {{statustext}} </p>
<p>Response Headers: {{headers}} </p>
<td>
<p>{{data.date}}</p>
</td>
<td>
<p>{{data.dept}}</p>
</td>
<td>
<p>{{data.release}}</p>
</td>
<td>
<p>{{data.feature}} </p>
</td>
<td>
<p>{{data.modulename}}</p>
</td>
<td>
<p>{{data.hours}}</p>
</td>
<td>
<p>{{data.comment}}</p>
</td>
</td>
</tr>
</table>
</div>
</div>
</body>
This is script.
<script>
var app = angular.module("appTable", []);
app.controller("Allocation", function($scope) {
$scope.hours = ["1", "2", "3"];
$scope.range = ["1", "2", "3"];
$scope.feature = ["UT", "FSDS", "Coding/Devlopment", "QA"];
$scope.dataList = [{
date: '17/07/2016',
dept: 'OneCell',
release: '1',
feature: "UT",
modulename: "Redundancy",
hours: "1",
comment: "Add extra information"
}];
$scope.add = function() {
var data = {};
var size = $scope.dataList.length;
if (!size) {
$scope.dataList = [{
date: '17/07/2016',
dept: 'OneCell',
release: '1',
feature: "UT",
modulename: "Redundancy",
hours: "1",
comment: "Add extra information"
}];
} else {
size = size - 1;
data.date = $scope.dataList[size].date;
data.dept = $scope.dataList[size].dept;
data.release = $scope.dataList[size].release;
data.feature = $scope.dataList[size].feature;
data.modulename = $scope.dataList[size].modulename;
data.hours = $scope.dataList[size].hours;
data.comment = $scope.dataList[size].comment;
$scope.dataList.push(data);
}
};
$scope.Submit = function() {
$scope.test = "Submit is pressed...";
$scope.displayList = [];
angular.forEach($scope.dataList, function(v) {
if (!v.isDelete) {
$scope.displayList.push(v);
}
});
$scope.dataList.splice(0);
};
$scope.remove = function() {
var newDataList = [];
angular.forEach($scope.dataList, function(v) {
if (!v.isDelete) {
newDataList.push(v);
}
});
$scope.dataList = newDataList;
};
$scope.postdata = function(date) {
var data = {
date: date,
};
$http.post('/add_status/', data).then(function(response) {
if (response.data)
$scope.msg = "Post Data Submitted Successfully!";
}, function(response) {
$scope.msg = "Service not Exists";
$scope.statusval = response.status;
$scope.statustext = response.statusText;
$scope.headers = response.headers();
});
};
});
app.directive("datepicker", function() {
function link(scope, element, attrs, controller) {
// CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
element.datepicker({
onSelect: function(dt) {
scope.$apply(function() {
// UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
controller.$setViewValue(dt);
});
},
dateFormat: "dd/mm/yy" // SET THE FORMAT.
});
}
return {
require: 'ngModel',
link: link
};
});
</script>
As you can see in the view I have called the postdata function of the controller.This function internally uses msg variable.But view is not printing value of this variable.I am very new to Aj. Please help.
You need to make following changes:
Remove ng-controller="Allocation as vm", as you already defined controller above., and you not using this syntax in controller.
after you removed as vm, then no need to vm. calls.
you need to inject $http in your controller., to make API call
See this fiddle demo, I logged dummy text in console for each `submit click.
and to make single call on submit, See this Fiddle
You should return a value in the function or add a scope variable to be shown in the controller's div, because right now you are not showing anything.
<div ng-controller="Allocation as vm">
<div>{{vm.postdata(data.date)}}</div>
<p>Output Message : {{msg}}</p>
<p>StatusCode: {{statusval}}</p>
<p>Status: {{statustext}} </p>
<p>Response Headers: {{headers}} </p>
</div>
Anyway, you should not run procedural function in this way. Bind it to an event, ng-click or something.
And do not create other than td or th child elements in tr.
This is the proper html table structure:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
My code is like this.
<form name="palletForm" novalidate=novalidate>
<div ng-app='myApp' ng-controller="MainCtrl">
<!--Small Package starts here -->
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line Quantity#</th>
<th>Ship Quantity</th>
<th>PickQuantity</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.LINQTY}}</td>
<td>{{data.SHPQTY}}</td>
<td>{{data.PickQty}}</td>
<td>
<input ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
</td>
<td>{{data.SHPQTY}}</td>
</tr>
<tr>
<td width="100%" colspan="4">
<button ng-show="prdElement.show" type="button" ng-click="newPackageItem( prdElement,$event)">Finish Package</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--Small Package ends here -->
</div>
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var counter = 0;
$scope.packageElement = [{
show: true,
palletClosed: false,
disableNextPallet: false,
Data: [{
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "021041029300",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 1000,
"Qtyplt": 0,
"packed": 0
}, {
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "4901000002201",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 2000,
"Qtyplt": 0,
"packed": 0
}]
}];
$scope.newPackageItem = function (packageElement, $event) {
var npackageElement = {};
angular.copy(packageElement, npackageElement);
counter++;
packageElement.show = false;
npackageElement.name = counter;
angular.forEach(npackageElement.Data, function (row) {
if (row.PickQty != row.newquantity || row.PickQty != 0) {
row.PickQty = row.PickQty - row.newquantity;
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
}
});
npackageElement.show = true;
angular.forEach(packageElement.Data, function (row) {
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
});
$scope.packageElement.push(npackageElement);
};
}]);
Inside button click I am calling a function newPackageItem I want to validate my text boxes before that function executes. textbox is number only field and required. I want to validate it in angular way. How can I achieve this?
Fiddle
<body ng-app="phonecatApp">
<form ng-controller="PhoneListCtrl" name="myForm">
<p>
<input name="Quantity" ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
<span class="error" ng-show="myForm.Quantity.$error.pattern">
</span>
</p>
</form>
</body>
and in your javascript file
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.pattern = /^[0-9]*$/;
});
Here is a validation example i uploaded to jsfiddle:
http://jsfiddle.net/sfk1bu1y/1/
AngularJS form validation is your friend:
https://docs.angularjs.org/guide/forms