my app.js:
var app = angular.module('factory', []);
app.controller('Ctrl', function($scope){
$scope.users =[
{name: 'jimbo', info: ''},
{name: 'bobby', info: ''}
];
$scope.addAllInfos = function(){
};
});
my index.html:
<!DOCTYPE html>
<html ng-app="factory">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="Ctrl">
<div ng-repeat="user in users">
Name: <input value="{{user.name}}"/><br>
Tell me sth: <input/><br><br><br>
</div>
<button ng-click="addAllInfos()">add all infos</button>
</body>
When clicking on "Add all infos" i want to iterate through all my users that i have generated by using ng-repeat and save the input of every "Tell me sth" input in the info-variable of the object.
How can I do so using Angular?
Fiddle
You just need to bind every repeated input to user.info using ngModel directive:
Tell me sth: <input type="text" ng-model="user.info" />
Demo: https://jsfiddle.net/xsakgy6b/2/
Note, that in this case addAllInfos function may become redundant as two-way data binding automatically populates user objects for you.
I think what you're looking for is the ng-model attribute. You should use ng-model on your input fields as well, instead of putting the value into the value attribute. This will allow you to take full control of two-way binding in Angular.
Then you would not really need the addAllInfos function, Angular will keep track of the values and properties of each object in your repeater. The code would look like this.
<div ng-repeat="user in users">
Name: <input type="text" ng-model="user.name"/><br>
Tell me sth: <input type="text" ng-model="user.info"/><br><br><br>
</div>
Here's my updated fiddle
Your first problem is your addAllInfos() function.
You do not have your addAllInfos() function available to the view / html. You need to expose the function, either through $scope, or returned via the controller class.
You can do that like so:
$scope.addAllInfos = function() { // code here };
This will allow you to call a function from the ng-click event on your .
Related
I'm new AngularJS, I'm trying to test the most basic form using AngularJS in JSFiddle. I'm not sure if I forget to configure anything in JSFiddle, but it is not working and it should.
I followed a basic sample from here.
I also include the CDN from here.
Here is the Angular code:
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
Link to my Fiddle: http://jsfiddle.net/bheng/tth4guev/
Settings
include
How would one go about debugging this further?
There are two things missing
(i) You need to add ng-app directive as follows,
<div ng-app="myApp" ng-controller="formCtrl">
(ii) Change the angular.js script version above 1.1 to use without a global controller, and change load type as No wrap in <head>
WORKING FIDDLE
I see, you did not add a name to your controller,and Angular App but in the JS you are accessing 'formctrl'. Go ahead and add a div around the form and add a ng-app='myApp' and a ng-controller='form-ctrl' to your form and it should work.
You need to wrap the form tag in a div tag with ng-app attribute. Your h1 tag should be encapsulated within the div tag as well...
Here's a working example:
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
So here's the thing I saw with your code:
You need to add the name of the App and the controller to the div.
Also you are repeating the name of the person in both fields, if you wish you can make an object with the person information to access each of his data fields:
<div ng-app="myApp" ng-controller="formCtrl">
<form>
Email: <input type="text" ng-model="person.firstname" />
Password: <input type="text" ng-model="person.password" />
</form>
<h1>You entered: {{ person.firstname }}</h1>
</div>
<script>
var myApp = angular
.module("myApp",[])
.controller("formCtrl", function($scope) {
//here's the object called "person":
var person = {
firstname: "John",
password: "password"
};
$scope.person = person;
});
</script>
I have 3 rows with 13 input fields in each row.
All the follow the rule of have a ng-model like:
First row: field[1][{1-13}]
Second row: field[2][{1-13}]
Third row: field[3][{1-13}]
So if I want to access to the first row and to the field #6 I do it like $scope.field[1][6]. The problem is that I cannot access like this to the field.
This is the HTML of the input:
<input ng-model='field[1][6]' type='text' />
I've tried to access by using: $scope.field[1][6] but it says that "field" is undefined.
Here is how I am trying to access it from my AngularJS controller:
angular.module("myModule")
.controller("myModuleController", ["$scope","$http", function($scope,$http) {
console.log($scope.field[1][2]);
}]);
This fields are created when the DOM loads and they cannot be generated with ng-repeat because some deeper factors.
I am new at AngularJS, thanks for the patience.
There should be no problem accessing that way. Maybe you have some error elsewhere.
angular.module('test', [])
.controller('Test', Test);
function Test($scope) {
$scope.fields = [
[
{name: '1-1'},
{name: '1-2'},
{name: '1-3'}
],
[
{name: '2-1'},
{name: '2-2'}
],
[
{name: '3-1'}
]
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<div ng-repeat='(i, lv1) in fields'>
<div ng-repeat='(j, lv2) in lv1'>
<input type='text' ng-model='lv2.name'>
<input type='text' ng-model='fields[i][j].name'>
</div>
</div>
<div>
<input type='text' ng-model='fields[1][1].name'>
</div>
</div>
Well, I found what the issue is in case someone needs to know.
Basically, in order for the array of inputs to be inside the $scope it needs to be looped with ng-repeat. So, even though you give the ng-model directive to the input it won't know about it because it wasn't processed by AngularJS.
Conclusion: You cannot just read the array of inputs this way. I worked it around by giving a dynamic ID, like field-1-6 and then using:
angular.element("#myApp").find("#field-" + firstIndex + "-" + secondIndex );
In my point of view is much better to just redo your code and make it be generated by angular. In my case it can't be done because the client doesn't want that piece of code upgraded. So, its a good workaround if you are in my situation.
;)
The code you have updated your question with unfortunately does not show
how you are initializing $scope.field
how you are using it in ng-repeat
<input ng-model='field[1][6]' type='text' /> can mean different things depending on the first two points.
Without context angular will read it like this http://jsfiddle.net/3tsw98yf/
Is that what you were looking for?
I got this example from the W3Schools tutorial on AngularJS. I made a small change from binding the value of the checkbox span to using an expression. I figured that the todo list wouldn't update any more. But it still does. What causes the ng-repeat to fire just because I have added a todo item?
http://plnkr.co/edit/Kojz2ODWDS8dFDNzjYR5?p=preview
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">
<h2>My Todo List</h2>
<form ng-submit="todoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done"> <span>{{x.todoText}}</span>
</div>
<p><button ng-click="remove()">Remove marked</button></p>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [{todoText:'Clean House', done:false}];
$scope.todoAdd = function() {
$scope.todoList.push({todoText:$scope.todoInput, done:false});
$scope.todoInput = "";
};
$scope.remove = function() {
var oldList = $scope.todoList;
$scope.todoList = [];
angular.forEach(oldList, function(x) {
if (!x.done) $scope.todoList.push(x);
});
};
});
</script>
</body>
</html>
Clicking the Add New Button submits the corresponding form and by using ng-submit="todoAdd()" it will call this function. This in turn adds an entry to the todoList in your scope. As this array has been modified the angular digest cycle is triggered and the list is updated.
Some suggestions for your questions: First of all, you mean W3Schools, not the W3C (which is a standardization organization and normally is not doing tutorials, which is why I got curios - Also, you will find lots of reasons why not to use W3Schools when goolgin around or looking at meta). Also, if you compare to some other code, you should include it or at least link to it.
I found it by googling and it seems your only change is using <span>{{x.todoText}}</span> instead of <span ng-bind="x.todoText"></span>. There really is no difference in terms of the digest cycle here. The only difference is that by using {{}} it might at first be rendered as curly brackets in the browser window, before the variable is actually replaced. Thus, it is usually better to use ng-bind.
Below is my angularjs code,
When I try to enter any text in the textbox, it doesn't appear in the binding.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('cont', ['$scope', function($scope) {
}]);
</script>
</head>
<body ng-app="myApp">
<input type="text" ng-bind="user"></input>
<p>{{user}}</p>
</body>
</html>
You would need to use ng-model directive for 2-way binding. ng-bind is just one-way which updates the bound element with data (model value) when a digest cycle happens. Without ng-model when you update the textbox there wont be any digest cycle. Angular has directive definition for types like input and other form controls which requires optional ng-model directive. And these element directives registers events like change/input etc only if it gets the optional ng-model controller on the target element. And when you have them it uses ng-model controller to set the view-value, model-value and triggers the digest cycle when that event occurs. Of course with the new angular versions there is an ng-model-options which you can set at the element level or at a global level to specify when do you want the model value update (and form validation) to happen.
So do:-
<input type="text" ng-model="user" name="user"></input>
<p>{{user}}</p>
Though not an issue in your case, you are missing the usage of ng-controller="cont". Without it all properties will be attached to the rootScope in your case. So may be:
<body ng-app="myApp">
<div ng-controller="cont">
<input type="text" ng-model="user" name="user"></input>
<p>{{user}}</p>
</div>
</body>
I have a web page with some HTML elements which I cannot edit. I'd like to dynamically attach ng-model attributes to these and have AngularJS re-bind them to the scope. A simplified example of what I want to accomplish can be found here
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script>
function MyCtrl($scope) {
$scope.myModel1 = "Hi";
$scope.myModel2 = "there";
var myModel2 = angular.element("#myModel2");
//This won't work
myModel2.attr("ng-model", "myModel2");
}
</script>
<div ng-app ng-controller="MyCtrl">
<input type="text" ng-model="myModel1"/>
<!-- I can't touch this -->
<input type="text" id="myModel2" />
</div>
You need to use $compile (docs)
$compile(myModel2.attr("ng-model", "myModel2"))($scope);
demo
When you load your page, angular uses $compile on the HTML automatically, that's how it knows which elements to assign which directives to. If you just change the attribute like you tried, angular doesn't know. You have to use $compile.