I have this html page:
<div class="rtm-nav">
<div ng-app>
<body ng-controller="DemandCtrl" ng-submit="submit()">
<label>From:
<input type="text" name="input" ng-model="ctrl.dataa.from">
</label>
<label>To:
<input type="text" name="input" ng-model="ctrl.dataa.to">
</label>
<input type="submit" id="submit" value="Apply" />
<script src="demand/demand.js"></script>
</body>
</div>
</div>
I want to save the input text from the 2 text boxes in the controller's scope. This is how I tried to do it:
class DemandCtrl {
constructor(ChartDataService) {
this.ChartDataService = ChartDataService;
debugger;
this.dataa = {
from: ctrl.dataa.from,
to: ctrl.dataa.to
};
}
$onInit() {
getData.call(null, this);
}
}
I get the error saying:
ReferenceError: ctrl.dataa is not defined
Is any better method to send the data from input text to the controller?
You haven't defined scope which is accepted by your controller. That's why you can't read data from the form. I would also suggest to use <form> to deal with any kind of data submission. So take a look at the refactored example of yours:
==== HTML ======
<div class="rtm-nav">
<div ng-app="my-app">
<form ng-submit="submit()" ng-controller="DemandCtrl">
<label>From:
<input type="text" name="input" ng-model="ctrl.data.from">
</label>
<label>To:
<input type="text" name="input" ng-model="ctrl.data.to">
</label>
<input type="submit" id="submit" value="Apply" />
</form>
</div>
</div>
===== Controller
angular.module('my-app', [])
.controller('DemandCtrl', function($scope) {
$scope.submit = function() {
let data = {
from: $scope.ctrl.data.from,
to: $scope.ctrl.data.to,
}
console.log(data);
};
});
Related
I have two forms(in one page). On first form there are two buttons NEXT and BACK. On clicking on the next i will render next form on page. I am using ng-if for this condition.
<form name="otpform" novalidate ng-if="renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" placeholder="{{ 'OTP' | translate }}" ng-model="otp" required >
<input type="button" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotoAck()">
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="checkotp()">
</div>
</fieldset>
</form>
Below is my js code.
$scope.checkotp = function () {
debugger;
var otpvalue;
$scope.otp = {};
otpvalue = $scope.otp; //undefined
}
When I try to access the otp model I am getting undefined property. On previous form I have next button. Inside next button I have $scope.renderotpform = true; so that above form is shown. May I know why I am not able to access OTP in the above code?
ng-if creates its own scope. So the otp inside ng-if is not binded directly to the controller.You can either bind the model to an object or use controller as syntax. The controller as syntax implicitly takes care of the dot rule.
For more info:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
AngularJs "controller as" syntax - clarification?
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm=this;
vm.renderotpform = true;
vm.checkotp = function() {
console.log(vm.otp);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<form name="otpform" novalidate ng-if="vm.renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" ng-model="vm.otp" required>
<input type="button" value="BACK" class="brown-button" ng-click="vm.gotoAck()">
<input type="submit" value="NEXT" class="blue-button" ng-click="vm.checkotp()">
</div>
</fieldset>
</form>
</div>
Make all ng-models of the Form from one Object..
It would work and there are other advantages for this like you could easily reset and post data with just one object.:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
$scope.renderotpform = true;
$scope.checkotp = function() {
console.log($scope.formData.otp);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="otpform" novalidate ng-if="renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" ng-model="formData.otp" required>
<input type="button" value="BACK" class="brown-button" ng-click="gotoAck()">
<input type="submit" value="NEXT" class="blue-button" ng-click="checkotp()">
</div>
</fieldset>
</form>
</div>
My form is very simple. Think of it as having 1 field and one submit button. The validation I want is also quite simple, if the 1 field is empty, then the submit button will be disabled. If not, the submit button will work. I am trying to do this dynamically using AngularJs and not quite sure what I am missing.
Although I am using Django-forms, my form renders in Html like this:
<div ng-app="myApp" ng-controller="searchController">
<form method='POST' action='' class="form-with-blue-labels" name="searchForm">
{% csrf_token %}
<input class="textinput textInput form-control" id="id_professor_name" maxlength="255" name="professor_name" placeholder="Search for a professor" required="required" type="text">
<input ng-disabled="disabled_bool" type="submit" class="btn btn-primary" value="Search" />
</form>
</div>
And my angular file looks like this:
angular.module('myApp', [])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
})
.controller('searchController', [
'$scope', function($scope) {
var search_target = angular.element('#id_professor_name');
if (search_target == ''){
$scope.disabled_bool = true;
}
}
])
Note: Since I am using Django and Angular together in a non-restful way, I changed the angular tags to be {$$}, while Django tags are {{}}.
Any help is appreciated!
EDIT
I have tried this now, and still can't get it to work :/
<div ng-app="myApp" ng-controller="searchController">
<form method='POST' action='' class="form-with-blue-labels" name="searchForm">
{% csrf_token %}
<input ng-change="change()" class="textinput textInput form-control" id="id_professor_name" maxlength="255" name="professor_name" placeholder="Search for a professor" required="required" type="text">
<input ng-disabled="disable_button" type="submit" class="btn btn-primary" value="Search" />
</form>
</div>
using this function
angular.module('myApp', [])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
})
.controller('searchController', [
'$scope', function($scope){
$scope.change = function(){
if (angular.element('#id_professor_name').length == 0) {
$scope.disable_button = true;
}
else {
$scope.disable_button = false;
}
};
}
])
As suggested here, you need to use ng-disabled="searchForm.$invalid" as you have already set name to required.
I have used mvc partial control in my page twice for search functionality.
It has it own controller to search, so my page has two controller with same name.
<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
<div id="search1">
#Html.Partial("_SearchPartial") // say it search1
// some other code to show search results
// ....
// ..
</div>
<div id="search2">
#Html.Partial("_SearchPartial") // say it search2
// some other code to show search results
// ....
// ..
</div>
</div>
This is _SearchPartial:
<form name="SearchCommon">
<div ng-model="search" ng-controller="SearchPartialController">
<div>
<input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
</div>
<div>
<input type="text" value="" placeholder="Make" ng-model="search.Make" />
</div>
<div>
<input type="text" value="" placeholder="Year" ng-model="search.Year" />
</div>
<div>
<input type="submit" value="SEARCH" ng-click="searchdata(search)" />
</div>
</div>
</form>
Now on init of MainController , i set the search model value in SetSearchParam() method like below:
$scope.SetSearchParam = function(){
var s = {};
s.Make = "Test";
s.Year = "2012";
s.Stock = "5"
$scope.search = s;
};
As search model is used in SearchPartialController, and page has two search control, value of s will be set in both partial controller. Also when i change params in search1, it will reflect search2.
I want that those search params only set for search1, not for search2.
When i change search1 params , it should not reflect the search2 or vice versa.
Is there any way to achieve it?
I thing you should initialize your filter(search) before your function.
Controller:
$scope.search1 = { Make : "Test", Year: "2012", Stock : "5" };
$scope.searchdata = function(search){console.log(search);};
Your view:
<body ng-controller="SearchPartialController">
<form ng-submit="searchdata(search1)">
<input type="text" placeholder="Stock" ng-model="search1.Stock" />
<input type="text" placeholder="Make" ng-model="search1.Make" />
<input type="text" placeholder="Year" ng-model="search1.Year" />
<button type="submit" class="btn btn-sm btn-primary">
Save
</button>
</form >
</body>
I'm starting with Angular and I'm still very confused with syntax and the many different ways I can code to get the same result.
My latest problem is that when I submit a form, I can't get its values by doing $scope.attribute_name
HTML
<body ng-app="myApp">
<div ng-include src="'menu.html'"></div>
<div id="container" ng-controller="MainController">
<div ui-view></div>
</div>
</div>
login.html (included by Route)
<form name="form" name='' action="" ng-submit='login($event)'>
<input type="text" name='username' ng-model='username' required />
<input type="text" name='password' ng-model='password' required />
<button>Enviar</button>
</form>
JS
var app = angular.module('myApp', ['ui.router']);
app.controller('MainController',['$scope',function($scope){
$scope.login = function ($event){
alert($scope.username)
$event.preventDefault();
}
}]);
It always alert "undefined"
I can get the values by doing the following
$event.target.username
Just like on Meteor.
Any ideas?
#edit1
I added user as the model's object
HTML
<form name="form" name='teste' action="" ng-submit='login($event)'>
<input type="text" name='username' ng-model='user.username' required />
<input type="text" name='password' ng-model='user.password' required />
<button>Enviar</button>
</form>
JS
app.controller('MainController',['$scope',function($scope){
$scope.login = function ($event){
alert($scope.user.username)
}
}]);
I still get undefined though
<form name="form" name='teste' action="" ng-submit='login()'>
<input type="text" name='username' ng-model='user.username' required />
<input type="text" name='password' ng-model='user.password' required />
<button>Enviar</button>
</form>
define your $scope inside the controller as below. Because attributes are registered to the $scope of the controller when the controller initializes.
app.controller('MainController',['$scope',function($scope){
$scope.user={}; //DEFINE $scope variable if dot is given to variable.
$scope.login = function (){
alert($scope.user.username)
}
}]);
Thanks
I have a form which inputs name of a country and then it overwrites a global variable. Submit button does nothing when clicked. Where am I missing?
Here is the HTML
<div ng-controller="InputController">
<form class="form-wrapper cf" role="form">
<input type="text" ng-model="model.country" placeholder="Search country..." required>
<button type="submit" ng-click="update()">Search</button>
<span>{{model.country}} ======</span>
</form>
</div>
And here is the controller.
LastFmApp.controller('InputController',
function InputController($scope) {
$scope.model = {};
$scope.update = function() {
console.log($scope.model.country);
};
});
I don't think it is an issue with angular js.
The submit button will reload the page so you won't be able to see changes in your model.
You can either use an input type button with ngClick:
<input type="button" ng-click="update()">Search</input >
Or an input type submit with ngSubmit attribute on your form:
<form ng-submit="update()">
<input type="submit">Search</input>
</form>
i dont think there is any issue with your code see your code is working in plunker
<div ng-controller="InputController">
<form class="form-wrapper cf" role="form">
<input type="text" ng-model="model.country" placeholder="Search country..." required>
<button type="submit" ng-click="update()">Search</button>
<span>{{model.country}} ======</span>
</form>
</div>
http://plnkr.co/edit/u9hqu1bASxxMgtEP1qAr?p=preview