I am new in AngularJS, I want to call signup method on button ng-click, but it never gets called.
<div class="row">
<div class="col-sm-5" style="" ng-controller="SignUpController">
<div class="row">
<button ng-click="$parent.signup()" class="form-control btn btn-primary">Sign-Up</button>
</div>
</div>
Angular Script
<script>
angular.module('index',[])
.controller('SignUpController', ['$scope', function($scope) {
$scope.signup=function(){
alert("");
};
}]);
</script>
Try this
<button ng-click="signup()" class="form-control btn btn-primary">Sign-Up</button>
in your case $parent does not have method signup
Related
I have a form, and I'm trying to bind date from it in the angularjs - controller so I can pass it into the djangorestframework view to do more stuff with it.
Now my problem is that I don't understand how to properly bind data from the datetimepicker input filed in the controller, I'll show up my form and small part of the controller, as far as I understand this is that I need to have ng-model on the input field and put a function on the Submit button, and that is clear for me but the part in the controller I don't understand, so how can I properly bind this, can someone please help me, thank you, controller is written in coffee script.
<div class="flex-grid"
ng-controller="FilterContactsListCtrl">
<div class="row">
<div class="cell size-p20 padding10">
<form action="." method="post">{% csrf_token %}
<label for="id_select_date">Select Date: *</label>
<div class="full-size">
<div class="input-control full-size text"
data-role="datepicker" date-format="mmmm d, yyyy">
<input id="id_select_date" ng-model="selectDate"/>
<button class="button"><span class="mif-calendar"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="cell size-p20 padding10">
<button class="button primary" ng-click="doAction()">
{% trans "Submit" %}
</button>
</div>
</div>
</div>
Controller:
app = angular.module 'vinclucms.sales'
app.controller 'FilterContactsListCtrl', ['$scope', '$rootScope', 'LeadContact'
($scope, $rootScope, LeadContact) ->
$scope.doAction = ()->
filterLeadContactList()
filterLeadContactList = () ->
$scope.selectDate = null
$scope.doAction = () ->
# Do Action with date form the input field so I can pass it to the restapi view
# this part I don't understand, how to bind this properly
]
the problem is you don't pass any model to your controller. basicly your doAction() method can't do anything!
What I suggest is to change your form to use ng-submit and pass your model to controller.
<form ng-submit="doAction(selectDate)" action="." method="post">{% csrf_token %}
<label for="id_select_date">Select Date: *</label>
<div class="full-size">
<div class="input-control full-size text"
data-role="datepicker" date-format="mmmm d, yyyy">
<input id="id_select_date" ng-model="selectDate"/>
<button class="button"><span class="mif-calendar"></span></button>
</div>
</div>
<button class="button primary" type="submit">
{% trans "Submit" %}
</button>
</form>
As you notice I bring your button inside the form with type=submit.
Later in your controller you can access your data model like this :
$scope.doAction = function(selectDate){
console.log(selectDate); // You have access to your data now
//Do what ever you want
}
In the directive I was wondering why the CSS is not reacting accordingly to the attributes. My ng-show is a simple boolean condition that depends if the required error of a certain input is true or not. In short what I want is while the required validation is true the take exam must be hidden until the user inputs something on the textbox
Here is the code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://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">
Required condition -- {{ loginForm.student_code.$error.required }}
<!-- dasdas -- {{loginForm.student_code.$error.codeValidity }} -->
<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="loginForm.student_code.$error.codeValidity">{{ errors }}</span>-->
</div>
</form>
<login-button form="loginForm"></login-button>
<button class="btn btn-primary">Register</button>
<!-- <br /> <strong>A message must be seen after the colon if codeValidity is true: </strong> -->
</div>
</div>
</body>
<script>
var app = angular.module("myApp", []);
app.directive('loginButton', loginButton);
loginButton.$inject = ["$http", "$window"];
function loginButton($http, $window){
return {
scope: {
form: '='
},
template: '<button type="button" class="btn btn-primary" ng-show="{{ !form.student_code.$error.required }}" ng-click="click()">Take Exam</button>',
controller: function($scope){
$scope.click = function(){
form = $scope.form;
form.student_code.$setValidity('codeValidity', false);
$scope.errors = "Code is Invalid";
};
}
}
}
</script>
</html>
Here is the plunker: https://plnkr.co/edit/plpKSGBtWqQnzhL60OfJ?p=preview
You are incorrectly trying to interpolate the variable inside the ng-show, but ng-show takes an expression. Interpolated values aren't evaluated in time for their value to be reflected by the ng-show directive. Instead, you should allow ng-show to evaluate the expression and interpolate it if necessary.
i.e. instead of: ng-show="{{ !form.student_code.$error.required }}",
do: ng-show="!form.student_code.$error.required".
Updated Plunker
It works now...Check the updated plunkr.
ng-show=" !form.student_code.$error.required "
You were making mistake in binding.
I´m pretty newbie on AngularJS, how can I update the value of my ng-model from my view?
Right now I have form and I´m updating app_key input, but when I call my module and I check the $scope.variable, the value has not change.
Here my code
<div>
<br>
<div class="field_row">
<label for="app_key">AppKey:</label>
<input id="app_key" type="text" ng-model="appKey"> --> this is the input that I´m changing the value
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="selectUser()">
Select
</button>
</div>
And in my module I have the method selectUser
$scope.selectUser = function () {
$scope.setAppKey($scope.appKey); --> Here the appKey it´s not modified
};
Solution
I dont know why, but to make it works I need to pass the ng-model to the controller function
<input id="app_key" type="text" ng-model="appKey" ng-change="changeAppKey(appKey)">
I made this working JSFiddle using your code. It seems to work just fine. Are you sure your setAppKey function is correct ?
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.selectUser = function () {
console.log($scope.appKey);
};
}
HTML
<div ng-controller="MyCtrl">
<div>
<div class="field_row">
<label for="app_key">AppKey:</label>
<input id="app_key" type="text" ng-model="appKey">
</div>
</div>
{{appKey}}
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="selectUser()">
Select
</button>
</div>
</div>
I have seen many issues regarding the $location.path in angular js on stackoverflow but none of them would solve the issue I have.
I have defined below routes in my app.js:
angular.module(
'hotPosts',
[ 'hotPosts.filters', 'hotPosts.services',
'hotPosts.directives',
'hotPosts.controllers', 'ngRoute', 'ngSanitize' ]).config(
[ '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/hot-posts', {
templateUrl : 'gptarin/partials/hot-posts.jsp',
controller : 'ListPostsCtrl'
});
$routeProvider.when('/list-users', {
templateUrl : 'gptarin/partials/list-users.jsp',
controller : 'ListUserCtrl'
});
$routeProvider.when('/edit-user/:userId', {
templateUrl : 'gptarin/partials/edit-user.jsp',
controller : 'EditUserCtrl'
});
$routeProvider.when('/create-user', {
templateUrl : 'gptarin/partials/edit-user.jsp',
controller : 'EditUserCtrl'
});
$routeProvider.otherwise({
redirectTo : '/hot-posts'
});
$locationProvider.html5Mode(false);
} ]);
The list-users.jsp partial will show a list of users where I can select a record to update. When I click ong update button the ngRoute successfully routes the app to edit-user.jsp partial. However, when I click the Save button in that page, it does not change the route to "/list-users", even though I used the $location.path('/list-users') in Controller EditUserCtrl. It redirects me to "[app_url]/?".
Here is my controllers:
app.controller('EditUserCtrl', [
'$scope',
'$routeParams',
'UserListFactory',
'UserFactory',
'$location',
function($scope, $routeParams, UserListFactory, UserFactory,
$location) {
// callback for ng-click 'updateUser':
// force it to refresh in the client
$scope.saveUser = function() {
if (angular.isUndefinedOrNull($scope.user)) {
$scope.user = {};
UserListFactory.create($scope.user, function() {
$location.path('/list-users');
});
} else if (angular.isUndefinedOrNull($scope.user.id)) {
UserListFactory.create($scope.user, function() {
$location.path('/list-users');
});
} else {
UserFactory.update($scope.user, function() {
$location.path('/list-users');
});
}
};
// callback for ng-click 'cancel':
$scope.cancel = function() {
$location.path('/list-users');
};
if ($routeParams.userId !== undefined) {
$scope.user = UserFactory.show({
userId : $routeParams.userId
});
}
} ]);
The update function (saveUser) uses a service which makes Restful requests to the backend server via ngResource. The service works fine (all tests are passed).
I have enclosed the $location.path in the success callback function when calling the resource actions.
I have tried catching "$locationChangeSuccess" and "$locationChangeError" and saw that in this case a $locationChangeError is thrown but I do not know which promise object is rejected causing this error.
Any help is highly appreciated.
Edit:
Here is the edit-user.jsp partial
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title label">Edit User</h2>
</div>
<div class="panel-body">
<form role="form" action="#" class="form-horizontal" ng-submit="saveUser()">
<div class="form-group col-sm-11">
<div class="form-group">
<label for="accountId" class="col-sm-1 control-label">G+
Id: </label>
<div class="col-sm-4">
<input type="text" id="accountId" class="form-control"
ng-model="user.gpId"></input>
</div>
<label for="accountName" class="col-sm-2 control-label">Name:
</label>
<div class="col-sm-5">
<input type="text" id="accountName" class="form-control"
ng-model="user.name"></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="checkbox" id="showPosts" class="form-control"
ng-model="user.listPosts">ShowPosts</input>
</div>
</div>
</div>
<div class="form-group col-sm-1">
<div class="row">
<div class="col-sm-offset-1 col-sm-12 pull-right">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-12 pull-right">
<button type="button" class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Well After a few days of trying everything and not finding any help over internet I sort of fixed this issue.
I decided to share it with whoever reads this post so that it does not take several days of them as well.
When I traced my app more carefully I figured out that my cancel button worked just fine and $location.path was successfully sending me back to the /list-users page.
Further investigations showed that the difference between my Cancel and Save buttons was that the Cancel button uses the ng-click whereas I defined the type of my Save button to be "submit".
I then changed my html code so that instead of providing the function call saveUser() in ng-submit of the form, I used an ng-click for the Save button and changed its type to "button".
Here is the working version of my html partial. I did not need to change anything in js files.
<form role="form" action="#" class="form-horizontal">
<!-- ng-submit="saveUser()"> -->
<div class="form-group col-sm-11">
<div class="form-group">
<label for="accountId" class="col-sm-1 control-label">G+ Id: </label>
<div class="col-sm-4">
<input type="text" id="accountId" class="form-control" ng-model="user.gpId"></input>
</div>
<label for="accountName" class="col-sm-2 control-label">Name: </label>
<div class="col-sm-5">
<input type="text" id="accountName" class="form-control" ng-model="user.name"></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label>
<input type="checkbox" id="showPosts" ng-model="user.listPosts"> Show Posts
</label>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" ng-click="saveUser()">Save</button>
<button type="button" class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</form>
I still still do not now the mechanics of form submit in angular and why it causes one of the promise objects that the $location.path expects to fail (and hence causing an error in routing).
Any clarifying comment in this regard is much appreciated.
Well after more than a year of experience with Angular, I now know what was the problem in the first instance.
Reading Angular's documentation for ng-submit I found out this:
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.
Looking at the code it is evident that I mistakenly added an action attribute when I was defining the form element:
<form role="form" action="#" class="form-horizontal" ng-submit="saveUser()">
Removing it will fix the problem:
<form role="form" class="form-horizontal" ng-submit="saveUser()">
you can add $event.preventDefault(); before saveUser(); it will works.
I'm using AngularJS showhide here http://angular-ui.github.io/ui-utils/ this is what I have:
<div ui-toggle="showHide">
<div class="col-md-12">
<input class="form-control" id="id_password" name="password"
type="password" ng-model="password" placeholder="Password">
</div>
</div>
<p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
This works however, how can I control the toggle directly from a controller?
Here's a fiddle showing the use of ng-show and ng-hide
http://jsfiddle.net/mikeeconroy/WUc94/
angular.module('myApp',[])
.controller('myCtrlr',['$scope',function($scope){
$scope.show = true;
$scope.toggle = function(){
$scope.show = !$scope.show;
};
}]);
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrlr">
<div ng-show="show">I'm using ngShow!!!</div>
<div ng-hide="show">I'm using ngHide!!!</div>
<div>Value of "show": <strong>{{show}}</strong></div>
<button ng-click="toggle()">Toggle</button>
</div>
</div>
You could just as easily use one of the directives too:
<div ng-show="show">I'm using ngShow (show == true)</div>
<div ng-show="!show">I'm using ngShow (show == false)</div>