获取Angular中文本字段的值

Question

I have a text-field form in my html in which I wish to extract to my controller.

Currently it always returns "undefined"

HTML:

<center>
    <button ng-click="RequestSubmit()" class="button button-assertive">
    Submit Request!
    </button>
</center>

<label class="item item-input">
<span class="input-label">Remarks</span>
 <input type="text" ng-model="remarkstext">
</label>

Controller:

.controller('ctrl', function($http, $scope, dataFactory) {
$scope.RequestSubmit = function($scope){

var t = $scope.remarkstext;
console.log("remarks: "+t);

Removing the "$scope" in the function() does not work. What could be the problem?

Answer 1

Try this plunker :

html:

<div>
<input type="text" ng-model="remarkstext">
 <button ng-click="RequestSubmit()" class="button button-assertive">
    Submit Request!
    </button>
</div>

JS:

$scope.remarkstext='';
$scope.RequestSubmit = function(){
console.log($scope.remarkstext);
}

Answer 2

USe this code::

.controller('ctrl', function($http, $scope, dataFactory) {
    $scope.RequestSubmit = function(){

    var t = $scope.remarkstext;
    console.log("remarks: "+t);

Answer 3

As @weirdpanda said in his comment, you have to remove $scope from the RequestSubmit function. Note that this function expects a parameter, and you are calling it without anyone. So in RequestSubmit function, $scope is undefined.

About the definition of your controller, it is not bad, but take into account that if you minify your code it won't work, you should define like this:

.controller('ctrl', ['$http', '$scope', 'dataFactory', 'StoreService', function($http, $scope, dataFactory, StoreService) {
    ...
}]);

Answer 4

@jjimenez has mentioned very correctly that you're using a function which expects a parameter without passing it any. This confuses the internals of AngularJS as it MAY think of that as a special extension function.

You have to remove the $scope from the function; furthermore, a very common coding standard is (it actually makes the code a lot more readable and easier to work with):

.controller( 'ctrl', [ '$scope', '$http', 'dataFactory', function( $scope, 
                                                                   $http, 
                                                                   dataFactory ) {

    $scope.RequestSubmit = function() {
        console.log( "Remarks: " + $scope.remarkstext );
    };

    // ... rest of the logic

}] );

After minification the old code wouldn't have worked because of the fact that when UglifyJS (or equivalent) minifies it, it renames the reserved variables $scope , etc. to e a or something else, which Angular is unable to resolve; when you use the array notation (I forgot its specific name), angular knows what to inject, only the names have changed.

Coming to your problem, one thing can be that you're trying to click the button before filling in the text; as you can read one of my answers here , I have explained how the ng-model works. Give that a read, and check!

If possible, can you give us a little bit about how you've defined your controller; in the context of HTML.

Answer 5

if you dont want to use $scope.remarkstext then pass remarkstext in ng-click.

NOTE : if you want to access model value in controller then you have to use $scope.remarkstext.

you are using remarkstext directly so it will give you error undefined.

use like this if you want value from parameter

 <center> <button ng-click="RequestSubmit(remarkstext)" class="button button-assertive"> Submit Request! </button> </center> <label class="item item-input"> <span class="input-label">Remarks</span> <input type="text" ng-model="remarkstext"> </label> 

 $scope.RequestSubmit = function(remarkstext){ var t = remarkstext; console.log("remarks: "+t); } 

---

your mistake

 $scope.RequestSubmit = function($scope){ var t = $scope.remarkstext; console.log("remarks: "+t); } 

i don't understand why you are using $scope in function parameters you can directly use $scope.remarkstext inside function.and remarkstext is in ng-model so it is available in $scope . ng-inspector to see scope tree in console.

---