This code works fine and outputs what I want to get but now I want to save each string or entry in an array so my entered data will not be lost. In this case, it is just working for one item I want to add multiple items and want to store them.
HTML code
<script src="angular.min.js"></script>
<script src="second.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<html ng-app="first">
<body ng-controller="second">
<form >
Enter YOur Name <input type="text" ng-model="product.name" placeholder="Enter Your Name" required><br>
Enter Your email <input type="email" ng-model="product.email" placeholder="Enter Your Email" required><br>
enter your pass<input type="password" ng-model="product.pass" placeholder="*******" required><br>
Enter Your Color <input type="radio" ng-model="product.radio" value="red" required><br>
select any of 1
<select ng-model="product.select">
<option>punjab</option>
<option>kpk</option>
<option>balochistan</option>
<option>peshawar</option>
</select>
<br>
<input type="submit" >
<input type="reset" >
</form>
{{product.name}}
{{product.email}}
{{product.pass}}
{{product.radio}}
{{product.select}}
</body>
</html>
js code
var app = angular.module("first", []);
app.controller("second", function($scope) {
$scope.product = [{
name: [],
email: [],
pass: [],
radio: [],
select: []
}];
});
I hope this is what you are looking for
Use a single array with multiple objects
On submitting the form your values shall be saved in the $scope.entrylist array
Controller function
function MainController($scope) {
$scope.color = {
name: 'none'
};
$scope.entrylist = [];
$scope.submit = function() {
var temp = {}
temp["name"] = $scope.product.name;
temp["email"] = $scope.product.email;
temp["password"] = $scope.product.pass;
temp["color"] = $scope.color.name;
temp["place"] = $scope.product.select;
$scope.entrylist.push(temp);
};
};
FULL EXAMPLE
Related
View 1:
<div ng-controller="ctrl1">
<button ng-click="goToExtendedForm({'name':'aaa'})">
</button>
</div>
ctrl1:
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
$state.go('view2');
console.log(e); // prints updated value
};
View 2:
<div ng-controller="ctrl1">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
</div>
But the input box is always empty, even though to get to the view the goToForm() is called. Why doesn't it update the HTML value?
Views are changed with ui.router's $state.
From your description, your code is supposed to work. Check if you are passing the right parameter into the function. Here is a working demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
console.log(e); // prints updated value
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="goToForm({'name':'aaa'})">Change</button>
<br>
<input type="text" ng-model="selectedList.name" ng-readonly="true" />
</div>
Try adding $scope.$apply() at the end of your $scope.goToForm function
Try this ;
HTML Code
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
<button ng-click="goToForm(testUserDetails)" >Go To</button>
</button>
</div>
</div>
Define controller like this;
function ClickToEditCtrl($scope) {
$scope.selectedList = {
name: ""
};
$scope.testUserDetails ={
name: "nimal"
}
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
console.log(e); // prints updated value
};
}
i want to get the selected checkboxes in my loop, for that check box i have to retrive the amount field onclick.
Here is my HTML script :
<div ng-repeat="$item in items">
Amount :<input ng-model="$item.daily_data.payment_amount">
Check : <input type=checkbox ng-model="checkAmount[$item.daily_data.id]" ng-value="$item.id" >
</div>
<input type="button" ng-click="checkNow()" />
The below script showing all check boxes . i want the only selected one.
JS Script :
$scope.checkAmount = {};
$scope.checkNow(){
console.log($scope.checkAmount);
}
First of all to use functions with $scope you should do something like this:
$scope.checkNow = function() {
...
}
or
$scope.checkNow = checkNow;
function checkNow() {
...
}
About your problem:
You could bind the checkboxes to a property (something like checked), so you can have the items that are checked easily in your controller.
Then, to calculate the total of all checked amount , I' suggest you to use Array.prototype.filter() + Array.prototype.reduce().
Here's a demo based on your original code:
(function() {
angular
.module("app", [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.checkNow = checkNow;
$scope.checkAmount = {};
$scope.items = [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
];
function checkNow() {
$scope.total = $scope.items.filter(function(value) {
return value.checked;
}).reduce(function(a, b) {
return a + b.amount;
}, 0);
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="$item in items">
<label>
Amount: <input type="number" ng-model="$item.amount">
</label>
<label>
Check: <input type=checkbox ng-model="$item.checked">
</label>
</div>
<button type="button" ng-click="checkNow()">Check now</button>
<hr>
<label for="total">Total</label>
<input type="number" id="total" disabled ng-model="total">
</body>
</html>
I have a multiple for filed which have a same name in array formate like
<input type='text' name="frm[]">. I want to submit this in AngularJS and get value in PHP.
my script:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
Use Angular's $http service to post the data to your php file.
Check the below code
<html ng-app="submitExample">
<script type="text/javascript" src="lib\angular.js"></script>
<script type="text/javascript" src="index.js"></script>
<form ng-submit="submit()" ng-controller="FormController">
Enter text and hit enter:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
<input type="submit" id="submit" value="Submit" />
</form>
<html>
var app = angular.module('submitExample', [])
app.controller('FormController', ['$scope','$http', function($scope,$http) {
$scope.data = {};
$scope.data.textvalt = new Array();
$scope.data.textvalt[1] = '';
$scope.data.textvalt[2] = '';
$scope.data.textvalt[3] = '';
$scope.submit = function() {
var configObject = {
method: 'POST',
url: 'index.php',
data: { textval1: $scope.data.textvalt[1] , textval2 : $scope.data.textvalt[2], textval3 : $scope.data.textvalt[3] }
}
$http(configObject).then
(function successCallback(response) {
console.log("posted sucuessfully");
},
function errorCallback(response) {
console.log("Failed");
});
};
}]);
I'm dynamically creating forms with ng-repeat and they have some validation attributes (simplified version):
<div class="row" ng-repeat="defect in model.defects">
<form name="form_{{defect.id}}" novalidate>
<input ng-model="defect.name" required/>
<input type="submit" ng-click="saveDefect(defect)"/>
</form>
</div>
Basically what I want to do is this:
$scope.saveDefect = function (defect) {
if ($scope.<how to get the form name here>.$invalid) {
return;
}
}
Since the form name has been created dynamically with an id how do I access it? Other ways of doing the same are also welcome ofcourse :)
You can use the bracket notation to access it :
$scope["form_"+defect.id]
What I advise you to do is :
var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
$scope.forms = {};
$scope.list = [{id: 1}, {id: 2}];
$scope.save = function(item) {
if ($scope.forms["form_" + item.id].$invalid) {
alert("error on form_" + item.id);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="Ctrl">
<div class="row" ng-repeat="item in list">
<form name="forms.form_{{item.id}}" novalidate>
<input ng-model="item.name" required/>
<input type="submit" ng-click="save(item)" />
</form>
</div>
</body>
as in the title.. how to prevent such operations to happen? Here is a link to the official site, see the example. The variable user.name is bound to the first input userName and if the input is empty the object user.name is removed. How can I disable this functionality of angularjs?
Try ng-model-options="{allowInvalid: true}" to update the model even for invalid entries.
<input ng-model="user.name" required ng-model-options="{allowInvalid: true}">
You've got 2 option
remove required from input tag it allows you to send back empty string to your backend
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.params = {
user: "John"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<input name="userName" ng-model="params.user" />
<hr/>
<pre>{{params| json}}</pre>
</div>
Option two validate your form before you send it to backend.
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.user = {
name: "John"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="someForm">
<input name="userName" ng-model="user.name" required name="userName" />
<span ng-show="someForm.userName.$error.required">User Name required</span>
<br/>{{user | json}}
<br/>
<button type="submit" ng-disabled="someForm.$invalid">Submit</button>
</form>
</div>