AngularJS dynamic form input with fieldset via ng-repeat - angularjs

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.

Related

ng-if not working with ng-repeat and radio button

I have the following html template:
<div ng-app ng-controller="Ctrl">
<div class="cont">
<table>
<tr><th ng-repeat="column in columns">{{column}}</th></tr>
<tr ng-repeat="(i, row) in people">
<td ng-repeat="(j, column) in columns">
<input type="radio" name="select" ng-if="column === 'id'">
<span>{{row[column]}}</span>
</td>
</tr>
</table>
</div>
</div>
Then I define my Ctrl as follow
function Ctrl($scope) {
$scope.selectedId = 'aaaaa';
$scope.columns = ['id','name', 'age'];
$scope.people=[
{
'id':'aaaaa', 'name':'rachit', 'age':11
},
{
'id':'bbbbb', 'name':'gulati', 'age':12
},
{
'id':'ccccc', 'name':'rocks', 'age': 13
}
]
}
https://jsfiddle.net/en91zuxb/
it's showing radio input for all the item, while my intention is to only show the radio button on the first column, because the 1st column is the id column... ...
It seems that your angular version is old, this was an error related to angularjs < 1.2. Try upgrading your angularjs version or use ng-show instead.
Following code worked for me.
<input type="radio" name="select" ng-show="column == 'id' ">

ng-model won't update the changed form content

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>

How do I make a quick refference in angularjs between generated items with ng-repeat?

First of all I am new to angularjs.
I want to make a simple / quick refference betweeen my anchors and paragraphs>inputs, depending on what I clicked in my angular web app.
I generate 3 table rows with 1 table data with the ng-repeat. After this, when I click one of the anchors my toggleDetails(todo.id,todo.nume,todo.prenume) triggers and I update my next below input values (#inputId, #inputNume, #inputPrenume) with basic javascript. I feel like I m doing it hard way. Can I use less code like some angularjs directives ?(I`m using a Yeoman framework) So, this is my HTML:
<div class="container" controller="AboutCtrl">
<h2>Lista persoane</h2>
<table>
<tr>
<th>Nume si prenume</th>
</tr>
<tr class="form-group " ng-repeat="todo in todos">
<td>
<a href ng-click="toggleDetails(todo.id,todo.nume,todo.prenume)">
<input type="text" ng-model="todo.nume" class="form-control">
</a>
</td>
</tr>
</table>
<div ng-hide="hideDetails">
<p>Id:<input type="text" id="inputId"/></p><br>
<p>Nume:<input type="text" id="inputNume"/></p><br>
<p>Prenume:<input type="text" id="inputPrenume"/></p><br>
</div>
</div>
About.js file
.controller('AboutCtrl', function ($scope, AfisareDateService) {
$scope.todos = [{
id: 1,
nume: 'name1',
prenume: 'name2'},{
id: 2,
nume: 'name3',
prenume: 'nam4'}, {
id: 3,
nume: 'name5',
prenume: 'name6'
}];
$scope.hideDetails = true;
$scope.toggleDetails = function(id,nume,prenume) {
$scope.hideDetails = !$scope.hideDetails;
var x = document.getElementById('inputId');
var y = document.getElementById('inputNume');
var z = document.getElementById('inputPrenume');
x.value = id;
y.value = nume;
z.value = prenume;
});
few changes
$scope.toggleDetails = function(todo) {
$scope.hideDetails = !$scope.hideDetails;
$scope.selectedTodo = todo
});
and use ng-model
<p>Id:<input type="text" ng-model="selectedTodo.id"/></p><br>
In html change parameter of toggledetail
<tr class="form-group " ng-repeat="todo in todos">
<td>
<a href ng-click="toggleDetails(todo)">
<input type="text" ng-model="todo.nume" class="form-control">
</a>
<div ng-show="Object.keys(selectedTodo).length>0">
<p>Id:<input ng-model="selectedTodo.id type="text" id="inputId"/></p><br>
<p>Nume:<input ng-model="selectedTodo.name" type="text" id="inputNume"/></p><br>
<p>Prenume:<input ng-model="selectedTodo. prenume" type="text" id="inputPrenume"/></p><br>
</div>
</div>
In controller
$scope.selectedTodo ={} //take variable
$scope.toggleDetails = function(todo) {
$scope.selectedTodo = todo;

How to watch ng-model included in ng-repeat?

This is my html code:
<table>
<tr ng-repeat="park in parkOptions.parks">
<td>
<label for="{{park.park_id}}">
<input id="{{park.park_id}}" type="radio" name="connection" ng-model="$parent.currentPark" value="{{park.park_id}}" ng-click="selectValue('park',park)"/>{{park.park_name}}
</label>
</td>
</tr>
</table>
How can i watch the changes in my model( I mean i want to see in $watch another park when i click radio button)
I've got a working version to help you - Fiddle.
HTML
<div ng-app ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
<table>
<tr ng-repeat="park in parkOptions.parks">
<td>
<label for="{{park.park_id}}">
<input id="{{park.park_id}}" type="radio" name="connection" ng-model="parkOptions.currentPark" value="{{park.park_id}}" ng-click="selectValue(park)"/> {{park.park_name}}
</label>
</td>
</tr>
</table>
</div>
</div>
JS
function ParentCtrl($scope) {
}
function ChildCtrl($scope) {
$scope.parkOptions = {};
$scope.parkOptions.parks = [
{park_id: '01', park_name: 'England Park'},
{park_id: '02', park_name: 'France Park'}
];
$scope.$watch('parkOptions.currentPark', function(newValue) {
if (newValue != undefined) {
console.log(newValue);
}
});
}
This may not be exactly what you want (as I see $parent in your code) but we can come to the right solution with any further information from you.
I don't use $parent and prefer sending and receiving events.

How to push objects in AngularJS between ngRepeat arrays

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>

Resources