I have a form which has a delete entry button and an add entry button. I want to output the updated form field data to formData={}, so that the submitted data will be up-to-date. However, when a fieldset is deleted, formData={} is not updated with the newest data entry information and the old form data still exist in formData={}. Here's the link for my code
try like this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function(){
var formCtrl = this;
formCtrl.forms ={
formData:[{ name:""}]
};
formCtrl.addFields = function(){
var name = {name:""};
formCtrl.forms.formData.splice(formCtrl.forms.formData.length,0,name);
};
formCtrl.rmFields = function(form){
var index = formCtrl.forms.formData.indexOf(form);
formCtrl.forms.formData.splice(index,1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl as formCtrl">
<table>
<tr ng-repeat="form in formCtrl.forms.formData">
<td> <input type="text" ng-model="form.name"></td>
<td> <input type="button" ng-click="formCtrl.addFields()" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="formCtrl.rmFields(form)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span> <pre>{{formCtrl.forms | json }}</pre></span>
</div>
Related
Please click on the demo below
www.jsfiddle.net/rnnb32rm/1370
My problem is: "Add input" is working fine. But whenever i invoke "Add
Fields", the subsequent field will be sync with the first one. I want
the subsequent to be filled with only one input. Stuck for hours already. Please guide!
Picture to illustrate:
May be help you.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
items:[{ name:"",family:"",age:""}]
};
$scope.addRow = function(index){
var item = { name:"",family:"",age:""};
if($scope.data.items.length <= index+1){
$scope.data.items.splice(index+1,0,item);
}
};
$scope.deleteRow = function($event,item){
var index = $scope.data.items.indexOf(item);
if($event.which == 1)
$scope.data.items.splice(index,1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in data.items track by $index">
<td> <input type="text" ng-model="data.items[$index].name"></td>
<td> <input type="text" ng-model="data.items[$index].family"></td>
<td> <input type="text" ng-model="data.items[$index].age"></td>
<td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span>{{data|json}}</span>
</div>
I answered this the first time you posted this question, but you deleted it.
You only have one choices array, and you are using it over and over:
$scope.addNewChoice = function() {
// ...
// Same array each time
$scope.choices.push({'id':'choice'+newItemNo});
};
<fieldset data-ng-repeat="choice in choices2">
<div data-ng-repeat="choice in choices "> <!-- Same array each time -->
You probably want one array for each entry in the choices2 array.
Also, both of your ng-repeat elements use the same variable name (choice) which is confusing.
I have a table generated with a ng-repeat directive.
Each cell can be editable and each row has a submit button.
The submit button must send only the data of the affected row to the controller instead of sending the complete table. Then the controller will send it to a database. So if my table is huge and has a lot of rows, I prefer to just send one row to the database instead of the complete table.
Most of the time I use <form name="myForm" ng-submit="sendMyData()"> to send data from the view to the controller but in this case I have multiple forms (one per each row).
My problem is that I have no idea how to identify each row generated by the ng-repeat.
I am using AngularJS Material.
You don't need forms to do this. I'll demonstrate how to achieve this using sample data:
Controller:
app.controller("MyController", function($scope) {
$scope.persons = [
{ id: 1, name: "Bob" },
{ id: 2, name: "Alice" }
];
$scope.submitPerson = function(person) {
// do something to person - send to backend etc...
};
});
View:
<div ng-controller="MyController">
<table>
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td><button ng-click="submitPerson(person)">Submit</button></td>
</tr>
</table>
</div>
By clicking the submit button within each row - the individual person object will be passed to the submitPerson function in your controller where you can send it to the backend or do anything else.
You can try something like below just to submit one row at a time and also change in any number of rows and tick box which rows to be updated at once by clicking Submit ALL button.
var app = angular.module('app',[]);
app.controller('noduesaccountsmodalcontroller',function($scope){
$scope.nodueaccountassets = [{'name':'x'},{'name':'a'},
{'name':'b'},{'name':'c'},{'name':'d'}];
$scope.init= function(){
};
$scope.selectedItems =[];
$scope.rowSubmit = function(row){
$scope.submittedRow = row;
};
$scope.submit = function(acc){
angular.forEach($scope.nodueaccountassets,function(emp){
if(emp.selected){
$scope.selectedItems.push(emp.name);
}
});
};
});
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<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>
<body ng-app="app" ng-controller="noduesaccountsmodalcontroller" ng-init="init()">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets track by $index">
<tr>
<td><input type="text" ng-model="emp.name"/></td>
<td>
<input type="checkbox" ng-model="emp.selected" value="{{emp.name}}" />
</td>
<td> <button type="button" value="submit" ng-click="rowSubmit(emp)">Submit</button></td>
</tr>
</tbody>
</table>
{{selectedItems}}
Submitted row --- {{submittedRow}}
<button type="button" ng-click="submit()" value="submit">Submit ALL</button>
</body>
I am generating a grid thru Angular and each row will have a dropdown. I want the dropdown to populate with data from the server which is working but during page load, it needs to set the selected item of each dropdown to the value of the property it's bound to. Simple example below...
Class CategoryField
ID
Name
CategoryID = 2
Select
Option1 text=Category A value=1
Option2 text=Category B value=2 <--- This item should be selected on load.
The code i have appears to have a selected attribute on an item in each dropdown from page source but the dropdown is loading and selecting the blank item angular adds. Code below for grid...UPDATED CODE BELOW
<div ng-app="CategoryFieldsApp">
Search:<input ng-model="search" type="text" placeholder="Search" />
#using (Html.BeginForm("CategoryFields", "Maintenance", FormMethod.Post))
{
<div ng-controller="CategoryFieldsCtrl">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th width="200">Category</th>
<th ng-click="sort('Name')" width="200">Name</th>
<th width="150">Active</th>
</tr>
</thead>
<tbody id="CategoryFieldGrid">
<tr dir-paginate="categoryField in categoryFields|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<td>
<input type="hidden" name="CategoryFields[{{$index}}].CategoryFieldID" ng-model="categoryField.CategoryFieldID" />
</td>
<td>
<input class="hdnCategoryID" type="hidden" name="CategoryFields[{{$index}}].CategoryID" />
<select ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select>
</td>
<td>
<input type="text" name="CategoryFields[{{$index}}].Name" ng-model="categoryField.Name" />
</td>
<td>
<input type="checkbox" class="active checkBox checkbox-inline" value="{{categoryField.Active}}" ng-model="categoryField.Active" name="CategoryFields[{{$index}}].Active" />
</td>
<td>
<input type="button" ng-click="remove($index)" value="Remove" />
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="5"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
<br />
<a class="btn btn-default" ng-click="add()">Add Category Field</a>
<input class="btn-primary btn-sm" type="submit" value="Save" />
</div>
}
<script>
var App = angular.module('CategoryFieldsApp', ['angularUtils.directives.dirPagination']).controller('CategoryFieldsCtrl', function ($scope, $http) {
$http.get("#Url.Action("GetCategoryFields", "Maintenance")").success(function (response) {
$scope.categoryFields = response; //ajax request to fetch data into $scope.data
});
$http.get("#Url.Action("GetCategories", "Maintenance")").success(function (response) {
$scope.categories = response; //ajax request to fetch data into $scope.data
});
$scope.sort = function (keyname) {
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
$scope.remove = function (index) {
$scope.categoryFields.splice(index, 1);
};
$scope.add = function () {
$scope.categoryFields.push({
CategoryFieldID: 0,
CategoryID: 0,
Name: '',
Active: true,
ShowRemove: true
});
};
});
//$(document).ready(function () {
// $('#CategoryFieldGrid tr').each(function (i, row) {
// var categoryID = $(row).find('.hdnCategoryID').val();
// console.log(categoryID);
// $(row).find('.ddlCategories').val(categoryID);
// });
// $('.ddlCategories').on('change', function (e) {
// var hidden = $(e.target).closest('tr').find('.hdnCategoryID');
// $(hidden).val($(e.target).closest('tr').find('.ddlCategories').val());
// });
//});
Have you considered using ng-options? It could be used to replace the explicit definition of your options:
<select ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select>
if you break down the expression we pass to ng-options, we're setting the value of the selected item to the CategoryID property, the visible name of each option to the category Name property, and we're passing in all the categories defined $scope.categories as options:
"category.CategoryID as category.Name for category in categories"
Here's a working example I put together: http://plnkr.co/edit/CXZaUYfqcIv7PbeUrT9j?p=preview
I was able to figure out the other side of the bindings so that the mvc model was updated for post back. I simply created a hidden field that was bound to the same property. When angular's ng-model updates, it updated the value of the hidden field also. Below is the syntax for those who needs it.
<input class="hdnCategoryFieldID" type="hidden" name="CategoryFieldApprovers[{{$index}}].CategoryFieldID" value="{{categoryFieldApprover.CategoryFieldID}}" />
<select ng-model="categoryFieldApprover.CategoryFieldID" ng-options="categoryField.CategoryFieldID as categoryField.Name for categoryField in categoryFields"></select>
I have to create a simple CRUD page with AngularJS.
I am able to add data with save button. Now when clicked on edit link form should get filled with the values with the row value. I am using angular's '.copy' object to get data into form.
For now text box getting valuse successfully but the select box not updating. And also want to make the select menu disable once clicked on edit link.
Below is the code:
apsApp.controller('clusterController', function ($scope ) {
var uid = 1;
$scope.clusters=[
{id:0, 'cluster':''},
];
$scope.environments = [
{name: 'DEV'},
{name: 'PROD'},
{name: 'QA'},
{name: 'Linux_Dev'}
];
$scope.selectedEnvironment = $scope.environments[0];
//add new cluster
$scope.saveNewClust = function() {
if($scope.clust.id == null) {
//if this is new cluster, add it in clusters array
$scope.clust.id = uid++;
$scope.clust.environment = $scope.selectedEnvironment.name;
console.log($scope.clust);
$scope.clusters.push($scope.clust);
}
else {
//for existing cluster, find this cluster using id and update it.
for(i in $scope.clusters) {
if($scope.clusters[i].id == $scope.clust.id) {
$scope.clusters[i] = $scope.clust;
}
}
};
//clear the add clusters form
$scope.clust = {};
};
//delete cluster
$scope.remove = function(id) {
//search cluster with given id and delete it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
confirm("This Cluster will get deleted permanently");
$scope.clusters.splice(i,1);
$scope.clust = {};
}
}
};
$scope.edit = function(id) {
//search cluster with given id and update it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
//we use angular.copy() method to create copy of original object
$scope.clust = angular.copy($scope.clusters[i]);
}
}
};
});
HTML Template is:
<div class="menuContent">
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id" />
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="4">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
<th>Edit</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment}}</td>
<td>{{clust.cluster}}</td>
<td>
<span class="glyphicon glyphicon-edit" ></span> |
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
I went over your code and changed a lot. Here is the new javascript part:
var app = angular.module('myApp', []);
app.controller('clusterController', function ($scope) {
var uid = 0;
$scope.clusters = [];
$scope.environments = [
{name: 'DEV'},
{name: 'PROD'},
{name: 'QA'},
{name: 'Linux_Dev'}
];
$scope.select = {};
$scope.select.selectedEnvironment = $scope.environments[0];
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
//add new cluster
$scope.saveNewClust = function () {
if ($scope.select.id == undefined) {
//if this is new cluster, add it in clusters array
$scope.clusters.push({
id: uid++,
cluster: $scope.select.cluster,
environment: $scope.select.selectedEnvironment
});
} else {
//for existing cluster, find this cluster using id and update it.
$scope.clusters[$scope.select.id].cluster = $scope.select.cluster;
$scope.select.id = undefined;
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
};
//clear the add clusters form
$scope.select.cluster = "";
$scope.select.selectedEnvironment = $scope.environments[0];
};
//delete cluster
$scope.remove = function (id) {
//search cluster with given id and delete it
for (i in $scope.clusters) {
if ($scope.clusters[i].id == id) {
confirm("This Cluster will get deleted permanently");
$scope.clusters.splice(i, 1);
$scope.clust = {};
}
}
};
$scope.cancelUpdate = function () {
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
$scope.select.id = undefined;
$scope.select.cluster = "";
$scope.select.selectedEnvironment = $scope.environments[0];
};
});
First of all, set the var uid to 0. Don't start from 1, because the array, which you want to check starts also indexing from 0. Secondly, I added an object which persists the data for the form, where the user chooses the environment and types the name for the cluster. The object is assigned to $scope.select. There we save the preselect environment for the select box. I also save the name "Save Cancel" here, because I made it so after editing one cluster, the label of the button changes from "Save Cluster" to "Update Cluster". Like this your users will know, when exactly they edit a cluster or when they add a cluster. Furthermore, while editing a cluster, another button Cancel Update appears, so the user can also stop editing a cluster. If this button should show or not is saved in $scope.select.showCancel.
The saveNewClust function handles both routines, one for saving and one for updating. The function for editing is therefore removed. I added another function cancelUpdate, which is called in case the user cancels the action.
This is the HTML part. I just updated the form to use the new select object and the ng-click routine when the user clicks on edit. The select box is now surrounded with ng-switch. If the user edits an existing cluster, the select box is disabled.
<div ng-controller="clusterController" class="menuContent">
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<span ng-switch on="select.showCancel">
<select ng-switch-when="true" disabled ng-model="select.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
<select ng-switch-default ng-model="select.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</span>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster"
ng-model="select.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id"/>
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">{{select.buttonLabel}}
</button>
<button ng-show="select.showCancel" type="button" class="btn btn-default pull-right" ng-click="cancelUpdate()">Cancel update
</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="4">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
<th>Edit</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment.name}}</td>
<td>{{clust.cluster}}</td>
<td>
<span class="glyphicon glyphicon-edit"></span>Edit
|
<a href="" ng-click="remove(clust.id)" title="Delete"><span
class="glyphicon glyphicon-trash"></span>Delete</a>
</td>
</tr>
</table>
</div>
</div>
</div>
Here is the jsfiddle for testing: http://jsfiddle.net/hv7Pb/
So I'm new to AngularJS and I'm trying to build a very simple list app, where I can create an ng-repeat item list and then push a selected item into another ng-repeat list. Although my problem seems to be very simple I wasn't able to find a proper solution yet.
So here's the simplified markup:
<body ng-app="MyApp">
<div id="MyApp" ng-controller="mainController">
<div id="AddItem">
<h3>Add Item</h3>
<input value="1" type="number" placeholder="1" ng-model="itemAmount">
<input value="" type="text" placeholder="Name of Item" ng-model="itemName">
<br/>
<button ng-click="addItem()">Add to list</button>
</div>
<!-- begin: LIST OF CHECKED ITEMS -->
<div id="CheckedList">
<h3>Checked Items: {{getTotalCheckedItems()}}</h3>
<h4>Checked:</h4>
<table>
<tr ng-repeat="item in checked" class="item-checked">
<td><b>amount:</b> {{item.amount}} -</td>
<td><b>name:</b> {{item.name}} -</td>
<td>
<i>this item is checked!</i>
</td>
</tr>
</table>
</div>
<!-- end: LIST OF CHECKED ITEMS -->
<!-- begin: LIST OF UNCHECKED ITEMS -->
<div id="UncheckedList">
<h3>Unchecked Items: {{getTotalItems()}}</h3>
<h4>Unchecked:</h4>
<table>
<tr ng-repeat="item in items" class="item-unchecked">
<td><b>amount:</b> {{item.amount}} -</td>
<td><b>name:</b> {{item.name}} -</td>
<td>
<button ng-click="toggleChecked($index)">check item</button>
</td>
</tr>
</table>
</div>
<!-- end: LIST OF ITEMS -->
</div>
</body>
And here goes my AngularJS Script:
var app = angular.module("MyApp", []);
app.controller("mainController",
function ($scope) {
// Item List Arrays
$scope.items = [];
$scope.checked = [];
// Add a Item to the list
$scope.addItem = function () {
$scope.items.push({
amount: $scope.itemAmount,
name: $scope.itemName
});
// Clear input fields after push
$scope.itemAmount = "";
$scope.itemName = "";
};
// Add Item to Checked List and delete from Unchecked List
$scope.toggleChecked = function (item, index) {
$scope.checked.push(item);
$scope.items.splice(index, 1);
};
// Get Total Items
$scope.getTotalItems = function () {
return $scope.items.length;
};
// Get Total Checked Items
$scope.getTotalCheckedItems = function () {
return $scope.checked.length;
};
});
So when I click the button, my toggleChecked() function triggers and it actually pushes something into my checked list. However, it seems to be just an empty object. The function can't get the actual item that I want to push.
What am I doing wrong here?
NOTE: Checking items via click on a button is intended. I don't want to use checkboxes in this case.
You can see the working model here: http://jsfiddle.net/7n8NR/1/
Cheers,
Norman
change your method to:
$scope.toggleChecked = function (index) {
$scope.checked.push($scope.items[index]);
$scope.items.splice(index, 1);
};
Working Demo
You'd be much better off using the same array with both lists, and creating angular filters to achieve your goal.
http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters
Rough, untested code follows:
appModule.filter('checked', function() {
return function(input, checked) {
if(!input)return input;
var output = []
for (i in input){
var item = input[i];
if(item.checked == checked)output.push(item);
}
return output
}
});
and the view (i added an "uncheck" button too)
<div id="AddItem">
<h3>Add Item</h3>
<input value="1" type="number" placeholder="1" ng-model="itemAmount">
<input value="" type="text" placeholder="Name of Item" ng-model="itemName">
<br/>
<button ng-click="addItem()">Add to list</button>
</div>
<!-- begin: LIST OF CHECKED ITEMS -->
<div id="CheckedList">
<h3>Checked Items: {{getTotalCheckedItems()}}</h3>
<h4>Checked:</h4>
<table>
<tr ng-repeat="item in items | checked:true" class="item-checked">
<td><b>amount:</b> {{item.amount}} -</td>
<td><b>name:</b> {{item.name}} -</td>
<td>
<i>this item is checked!</i>
<button ng-click="item.checked = false">uncheck item</button>
</td>
</tr>
</table>
</div>
<!-- end: LIST OF CHECKED ITEMS -->
<!-- begin: LIST OF UNCHECKED ITEMS -->
<div id="UncheckedList">
<h3>Unchecked Items: {{getTotalItems()}}</h3>
<h4>Unchecked:</h4>
<table>
<tr ng-repeat="item in items | checked:false" class="item-unchecked">
<td><b>amount:</b> {{item.amount}} -</td>
<td><b>name:</b> {{item.name}} -</td>
<td>
<button ng-click="item.checked = true">check item</button>
</td>
</tr>
</table>
</div>
<!-- end: LIST OF ITEMS -->
Then you dont need the toggle methods etc in your controller
Try this one also...
<!DOCTYPE html>
<html>
<body>
<p>Click the button to join two arrays.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
function myFunction() {
var hege = [{
1: "Cecilie",
2: "Lone"
}];
var stale = [{
1: "Emil",
2: "Tobias"
}];
var hege = hege.concat(stale);
document.getElementById("demo1").innerHTML = hege;
document.getElementById("demo").innerHTML = stale;
}
</script>
</body>
</html>