I need to have two instances of a controller. The first instance must set a variable and the second I have to read it. The variable to set is inside the object vm (so do not use $ scope).
The code of controller is:
app.controller("AppController", function(){
var vm = this;
vm.search = null;
});
The code of first html page is:
<div class="input-group" ng-controller="AppController as app">
<input type="text" class="form-control" ng-model="app.search" placeholder="Search...">
</div>
And the code of second html page is:
<div class="input-group" ng-controller="AppController as app">
{{app.search}}
</div>
But in the second page, the value of app.search is null.
I recommend using a service to communicate data between your controller instances. This answer explains it perfectly.
But if you are keen on not using a service to share data, you can store your search variable in the $rootScope, this will make it available in all your controller instances, and in every other controller in your app. I have to warn you, this is not proper data encapsulation.
Here is how to do it:
First HTML view:
<div class="input-group" ng-controller="AppController as app">
<input type="text" class="form-control" ng-model="$root.search" placeholder="Search...">
Second HTML view:
<div class="input-group" ng-controller="AppController as app">
{{$root.search}}
</div>
I created this factory:
.factory("search", function(){
var stringaRicerca = null;
return {
getStringa: function(){
return stringaRicerca;
}, setStringa: function(stringa){
stringaRicerca = stringa;
}
};
})
And the modified controller is:
app.controller("AppController", function("search"){
var vm = this;
vm.string = search.getString;
vm.set = search.setString;
});
The first page modified is:
<div class="input-group" ng-controller="AppController as app">
<input type="text" class="form-control" ng-model="search" placeholder="Search...">
<button class="btn btn-default" ng-click="app.set(search)" type="button">GO!</button>
</div>
And the second page modified is:
<div class="input-group" ng-controller="AppController as app">
{{app.string}}
</div>
But in the second page i see anything
Related
I am not very familiar with the directives in the AngularJS as I'm used on relying on controllers. Is it possible to set validity on other inputs via directive? Here is the case, I have a button and when it is clicked.. It should set a validity on a certain input text. But I just can not seem to get the code that will set the validity.
Here is the HTML code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div class="container">
<div id="login-container">
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
</div>
<form name="loginForm" novalidate>
<div class="form-group">
dasdas -- {{ loginForm.student_code.$error.codeValidity }}
<input type="text" class="form-control text-center" name="student_code" ng-model="studentCode" placeholder="Enter Exam Code" required />
<span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span>
</div>
</form>
<login-button form="loginForm"></login-button>
<button class="btn btn-primary">Register</button>
</div>
</div>
</body>
</html>
Here is the JS Code:
var app = angular.module("myApp", []);
app.directive('loginButton', loginButton);
loginButton.$inject = ["$http", "$window"];
function loginButton($http, $window){
return {
template: '<button type="button" class="btn btn-primary">Take Exam</button>',
link: function(scope, element, attrs, ctrl){
element.on('click', function(){
form = attrs.form;
form.student_code.$setValidity('codeValidity', true);
scope.errors = "Code is Invalid";
});
}
}
}
Here is a sample on plunker: http://plnkr.co/edit/kcdDgZpStQixTpGWqxOp?p=preview
PS.
I know this can be easily achieved using controllers but I would like to achieve this using directives as my practice to get used to it.
Yes, it is possible and you almost got it right. What you wanna do is pass form to isolated scope and then use in directive controller.
There is no need to add event manually, as you can use ng-click.
Otherwise you would need to use $scope.$apply.
In directives you can use linking function, but you don't have to.
In general it is good practice to keep light logic in controller and DOM manipulation in linking function.
var app = angular.module("myApp", []);
app.directive('loginButton', loginButton);
loginButton.$inject = ["$http", "$window"];
function loginButton($http, $window){
return {
template: '<button type="button" class="btn btn-primary" ng-click="click()">Take Exam</button>',
scope: {
form: '='
},
controller: function($scope){
$scope.click = function(){
form = $scope.form;
form.student_code.$setValidity('codeValidity', false);
};
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="myApp">
<div class="container">
<div id="login-container">
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
</div>
<form name="loginForm" novalidate>
<div class="form-group">
dasdas -- {{ loginForm.student_code.$error }}<br>
<input type="text" class="form-control text-center" name="student_code" ng-model="studentCode" placeholder="Enter Exam Code" required />
<span class="errors" id="error-student-code" ng-if="errors">{{ errors }}</span>
</div>
</form>
<login-button form="loginForm"></login-button>
<button class="btn btn-primary">Register</button>
</div>
</div>
</div>
I set the values of textboxes via a ajax request in my controller like this :
$http({method: 'GET', url: url}).success(function(data) {
$scope.valzz = data;
$scope.company = $scope.valzz[0].Company;
});
Then in my html :
<label class="item item-input item-stacked-label">
<span class="input-label">Company :</span>
<input type="text" placeholder="Company" value="" ng-model="company">
</label>
<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
Save Changes
</button>
This correctly puts the company name in the company textbox. But when make a change to that textbox and press the save button, the new value of the textbox isnt showing - it still gets the original. This is the button click in the controller :
$scope.saveChanges=function(){
alert($scope.company);
};
Why is $scope.company not the new value of the textbox? am i doing something wrong? (sorry if basic i am new to angular)
Try removing value=""
HTML:
<label class="item item-input item-stacked-label">
<span class="input-label">Company :</span>
<input type="text" placeholder="Company" ng-model="company">
</label>
<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
Save Changes
</button>
In corresponding CONTROLLER:
$scope.saveChanges = function() {
alert($scope.company);
};
You don't have a watcher for that model.
$scope.$watch('company', function(company) {
console.log(company);
}
Or in your template, you can interpolate the value:
{{company}}
And then you can see it changing on the html page, because angular make a watcher for it behind the scene
Needed to put this.company not $scope
Please define $scope.company before $http call
app.controller('myCtrl', function($scope, $http){
$scope.company = null; // <--
$http({method: 'GET', url: url}).success(function(data) {
$scope.valzz = data;
$scope.company = $scope.valzz[0].Company;
});
}
Because, once the partials has rendered, it gets only the defined properties in $scope. After that if any property is added inside $scope it needs to call the $apply.
Hope this may help you.
I would assume that you have $scope working properly, and that you have initialized the controller in your app, as well as linked to the proper controller file. Please compare your code to what I have here, as this is working properly.
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src ="controller.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="testController">
<form>
<label class="item item-input item-stacked-label">
<span class="input-label">Company :</span>
<input type="text" placeholder="Company" ng-model="company">
</label>
<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
Save Changes
</button>
</form>
</div>
</body>
</html>
Controller:
(function(){
'use strict';
var app = angular.module('myApp', []);
app.controller('testController', [ '$scope', function ($scope){
$scope.saveChanges=function(){
alert($scope.company);
};
}]);
})();
Edit: Fiddle
I have the following loop in which I'm trying to increment several fields based on the array index each time through the loop.
<div class="individualwrapper" ng-repeat="n in [] | range:4">
<div class="iconimage"></div>
<div class="icontext">
<p>Imagine that you are in a health care facility.</p>
<p>Exactly what do you think this symbol means?</p>
<textarea type="text" name="interpretation_1" ng-model="interpretation_1" ng-required="true"></textarea>
<p>What action you would take in response to this symbol?</p>
<textarea type="text" name="action_1" ng-model="action_1" ng-required="true"></textarea>
</div>
</div>
I'd like to do something similar to this"
ng-model="interpretation_{{$index + 1}}"
Angular is not rendering that value though? What would be the best way to go about adding this kind of logic in the mg-model field?
It becomes an invalid expression with the usage of interpolation with ng-model expression. You need to provide a property name there. Instead you can use an object and use bracket notation.
i.e in your controller:
$scope.interpretation = {};
and in your view use it as:
ng-model="interpretation[$index + 1]"
Demo
angular.module('app', []).controller('ctrl', function($scope) {
$scope.interpretation = {};
$scope.actions = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
{{interpretation}} {{actions}}
<div class="individualwrapper" ng-repeat="n in [1,2,3,4]">
<div class="iconimage">
</div>
<div class="icontext">
<p>Imagine that you are in a health care facility.</p>
<p>Exactly what do you think this symbol means?</p>
<textarea type="text" ng-attr-name="interpretation{{$index + 1}}" ng-model="interpretation[$index+1]" ng-required="true"></textarea>
<p>What action you would take in response to this symbol?</p>
<textarea type="text" name="action{{$index + 1}}" ng-model="actions[$index+1]" ng-required="true"></textarea>
</div>
</div>
</div>
I need to duplicate some input fields in order to handle data from clients. I have done it with jQuery http://jsfiddle.net/m7R3f/1/
HTML:
<fieldset id="fields-list">
<div class="pure-g entry">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-1" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</fieldset>
<button id="add">Add</button>
JS
$(document).ready(function ()
{
$("#add").click(function ()
{
$(".entry:first").clone(false).appendTo("#fields-list");
});
});
However I just start learning Angular and want to convert these code to Angular.
I have read questions in stackoverflow and found the code with angularjs here: http://jsfiddle.net/roychoo/ADukg/1042/. However, it seem works only for ONE input field? Can I clone/duplicate several input fields using AngularJS? (in other word: convert my code above into AngularJS version?)
Thank you very much.
If you want to clone html element, the best way to use ng-repeat directive.
Your Controller
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<fieldset id="fields-list">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</fieldset>
<button type="button" id="add" ng-click="add()">Add</button>
</body>
</html>
Angular prevents of creation duplicated elements, to avoid this, use track by like in the example
You should create an array and use ng-repeat in your HTML. Each object in the array can contain the data necessary to populate your divs. If you want to start with three entries, then add the data for those three. If you want to add more, then simply push onto the array. Because of Angular's 2-way data binding your form field will appear once the element is pushed onto the array.
For more details on how to do this, checkout the To Do example on Angular's home page.
How about this(Fiddle)
add two more ng-model and push those models
$scope.add = function(){
$scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3);
}
I am new with AngularJs
if I want to define two model in html
how do I define it?
I haved tried it much times
please help
<body ng-app="experiment">
<div ng-controller="functionCrtl" id="staff">
<div ng-modle="data1.data">
<ng-view></ng-view>
</div>
<div ng-app="experiment_left">
<div ng-controller="accordtionCrtl">
<div ng-model="accordtion.accordtion">
<ng-view></ng-view>
</div>
</div>
experiment.config (function($routeProvider) {
$routeProvider.when("/",{
templateUrl : "function1.html",
controller: 'functionCrtl'});
I want to dynamic load two page , how can I do?
But to answer your question read this http://docs.angularjs.org/api/ng.directive:input.
Controller:
angular.module('myApp').controller('CreateUserCtrl', function ($scope) {
$scope.firstname = 'John';
$scope.surname = 'Doe';
});
HTML
<form ng-controller="CreateUserCtrl">
<input ng-model="firstname " type="text" placeholder="firstname">
<input ng-model="surname" type="text" placeholder="surname">
</form>