<div ng-controller="NotesController as noteCtrl">
<div class="form-group">
<input class="form-control" id="inputdefault" type="text" style="float: left;width: 90%;" ng-model="newNoteText" >
<button class="btn btn-primary" ng-click='noteCtrl.addNewNote()' type="button" style="margin-left: 0.5%"><span class="glyphicon glyphicon-plus"></span> ADD</button>
</div>
============================================
var app=angular.module('myApp',[]);
app.controller("NotesController",function(){
this.allNotes=notes;
this.note={};
this.addNewNote=function(){
alert(newNoteText);
};
});
Please let me know how to access the input text box value in my controller?
You aren't even injecting the $scope variable. You want something like this:
app.controller('NotesController', function($scope) {
$scope.allNotes=notes;
$scope.note={};
$scope.addNewNote = function(){
alert($scope.newNoteText);
};
});
No need to use this in Angular.
You need to inject the scope variable:
var app = angular.module('myApp', []);
app.controller("NotesController", function ($scope) {
$scope.allNotes = $scope.notes;
$scope.note = {};
$scope.addNewNote = function () {
console.log($scope.newNoteText);
};
});
See my fiddle.
No need to inject $scope since you're using controllerAs. Just replace this:
ng-model="newNoteText"
with this:
ng-model="noteCtrl.newNoteText"
and in your controller replace this:
alert(newNoteText);
with this:
alert(this.newNoteText);
Related
I created edit form so I have to include default value for each text field. I wrote this HTML code:
<input type="text" ng-model="projectData.title" ng-init="projectData.title=title" name="title" class="form-control" />
In controller:
$scope.title = "This is just title";
It shows nothing in the text box. I tried ng-init="projectData.title={{title}}" and ng-init="projectData.title='title'" but it's just not working.
I'm using angularjs 1.6 and the following solution is not working too.
http://jsfiddle.net/Aejvm/337/
In your scope, you should declare the object like so:
$scope.projectData = {};
$scope.projectData.title = "This is just title";
Check This [Code][1]
[1]: http://jsfiddle.net/d4ts76ys/
Use the object to map it to ng-model
Well you are doing a little wrong.
ng-init is angular directive and you dont need curly braces.
modify your code to this :
html:
<div ng-controller="MyCtrl">
<input type="text" ng-init="rootFolders.name=name" ng-
model="rootFolders.name" >
<br>rootFolders={{name}}
</div>
js:
var app = angular.module('myApp',[]);
app.controller('MyCtrl', function($scope) {
$scope.name = "Acunisasi";
});
I have created fiddle that may help your
jsfiddle
//html
<div ng-controller='MyCtrl'>
<form>
<input ng-init="projectData.title = title" type="text" ng-model="title">
<button ng-click="formSubmit()">
submit
</button>
</form>
{{title}}
</div>
//js
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', MyController]);
function MyController($scope) {
$scope.projectData = {};
$scope.title = 'This is just title';
$scope.formSubmit = function() {
console.log("$scope.projectData ===>", $scope.projectData)
}
}
I have problem of my code but couldn't find that,I updated an array but it doesn't update in my main view
here my code
app.controller("MainCtrl", function ($scope, $http) {
$scope.user = [];
$scope.adduser = function (fuser, luser) {
var name = { fname: fuser, lname: luser }
// debugger;
$scope.user.push(name);
};
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
<h3>User Info</h3>
<userinfo></userinfo>
<div ng-repeat="name in user">
{{name.fname}}
</div>
</div>
<form name="myForm" ng-controller="MainCtrl">
First Name : <input type="text" ng-model="fname">
<br> Last Name : <input type="text" ng-model="lname">
<button type="button" class="btn btn-primary" ng-click="adduser(fname,lname)">Add</button>
</form>
You need to pass the variable in the directive,
<userinfo user='user'></userinfo>
and the directive as,
scope: {
user: '='
}
controllerAs syntax makes available your controller function this(context) accessible via its alias, here it is c. As you're using controllerAs syntax, Your binding values should be bounded to controller function context (this). You should be avoid using $scope in controller in controllerAs approach. Even while calling adduser method call it by controller alias c.adduser
Code
app.controller("MainCtrl", function ($http) {
var c= this;
c.user = [];
c.adduser = adduser;
function adduser(fuser, luser) {
var name = { fname: fuser, lname: luser }
// debugger;
c.user.push(name)
};
})
// template
<div ng-controller="myController">
<input type="text" ng-model="name">
<p>{{name}}</p>
<p>{{10+10}}</p>
<button type="button" ng-click="{{myFunction()}}">click Me !!</button>
<p ng-show="{{myFunction()}}">The name is {{ name | uppercase }}</p>
</div>
// Controller
myApp.controller('myController', function ($scope) {
$scope.name = 'Ranka';
$scope.myFunction = function(){
return true;
};
});
Here it is failing in case of ng-click
angular.js:14525 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{myFunction()}}] starting at [{myFunction()}}].
Just use without the expression,
<button type="button" ng-click="myFunction()">click Me !!</button>
ng-show and ng-click are already an inbuild directive in angularjs. So, we no need to put it in curly braces for these expressions.
Without controller we doing the context in html itself. Use ng-init directive use to define as a variable you like and override the variable in ng-click as you want
<div ng-controller="MyCtrl" ng-init="showName = false;">
<input type="text" ng-model="name">
<p>{{name}}</p>
<p>{{10+10}}</p>
<button type="button" ng-click="showName = true">click Me !!</button>
<p ng-show="showName">The name is {{ name | uppercase }}</p>
</div>
controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Ranka';
}
Working Fiddle
try this simple way
<button type="button" ng-click="{{ myFunction(); isShow = false}}">click Me !!</button>
<p ng-show="{{isShow}}">The name is {{ name | uppercase }}</p>
and controller should be like,
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.isShow= true;
$scope.name = 'hallow world!';
}
The "declineReasonId" variable is not updates. i use $parent to access parent variable inside "ng-repeat" but it still not working.
I have ng-template html:
<script type="text/ng-template" id="boxDeclineReasonPopup.html">
<div class="modal-header">
<h3 class="modal-title">Chose reason</h3>
</div>
<div class="modal-body">
<form>
<div class="form-group reasonPopupLabel">
<div ng-repeat="(key, value) in reasons" ng-if="key != 0">
<label>{{value}}</label>
<input type="radio" class="form-control" name="reason" ng-model="$parent.declineReasonId" ng-value="{{key}}">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="declineReasonId === '0'" ng-click="ok()">Submit</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
and my controller:
(function () {
function declineReasonModalController($scope, $modalInstance, appData) {
$scope.declineReasonId = '0';
$scope.reasons = appData.report_type;
$scope.ok = function () {
$modalInstance.close($scope.declineReasonId);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.$watch('declineReasonId', function () {
debugger;
});
}
declineReasonModalController.$inject = ['$scope', '$modalInstance', 'appData'];
var controllers = angular.module('app.controllers');
controllers.controller('DeclineReasonModalController', declineReasonModalController);
})();
The modal instance triggered by function:
$scope.decline = function () {
var modalInstance = $modal.open({
templateUrl: 'boxDeclineReasonPopup.html',
controller: 'DeclineReasonModalController'
});
modalInstance.result.then(function (reasonId) {
$scope.declineReasonId = reasonId;
$scope.declineConfirm();
}, function () { });
};
If i put "{{$parent.declineReasonId }}" inside ng-repeat is duplicate copy of variable. When i press radio button is change value of one of duplicated copies. Why?
The $parent is still not the modal controller's scope yet.
You can use $parent.$parent.declineReasonId to reach the scope in your specific case.
That is why the use of $parent is discouraged.
The best practice when using ng-model is to not reference something in $scope directly, like this:
$scope.model = {};
$scope.model.declineReasonId = '0';
Then change your ng-model this instead:
ng-model="model.declineReasonId"
I have a simple text box and a button and whenever user click on button the alert shows the text of textbox but I want to do it this way(I know there are a lot better ways but first I want to understand why this way does not work):
var app = angular.module('app', []);
app.factory('Service', function() {
var service = {
add: add
};
return service;
function add($scope) {
alert($scope.user.username);
}
});
app.controller('table', function(Service,$scope) {
//get the return data from getData funtion in factory
this.add = Service.add($scope);
});
As you can see I send the scope to factory and I define the user.username as follow:
<button class="btn btn-primary" ng-click="t.add(user.userName)">
But when I run this nothing happens can anyone tell me what is wrong with this code?
<body ng-app="app">
<form>
<div class="row commonRow" ng-controller="table as t">
<div class="col-xs-1 text-right">item:</div>
<div class="col-lg-6 text-right">
<input id="txt" type="text" style="width: 100%;"
ng-model="user.userName">
</div>
<div class="col-xs-2">
<button class="btn btn-primary" ng-click="t.add(user.userName)">
click me</button>
</div>
</div>
</form>
also the plnk link is as follow:
plnkr
The problem is in this line
this.add = Service.add($scope);
Here you are assigning the returned (which is undefined) value of the Service.add($scope) invocation to the this.add.
The right approach will be either
this.add = function(data) { Service.add($scope); }
or
this.add = Service.add;
// in the service factory.
function add(usrNm) {
alert(usrNm);
}
The first thing is you can't use $scope in a service.and in controller your not assaining this(object) to $scope.so $scope doesn't contain any value.
I suppose you to write like this
$scope.user = this;