How to pass args from html to js?

Question

I'm trying to pass the value of an input this way:

html

<tr ng-controller="fCtrl as fiche">
    <td>
        <span>
            <input type="checkbox" name="q" ng-model="qo" >
            <input type="checkbox" name="q" ng-model="qa" >
        </span>
    </td>
    <td>
        <button type="submit" class="btn btn-primary" ng-click="fiche.submitEdit(q)">Modifier</button>
    </td>
</tr>

js

(function(){
    var app = angular.module('m', [ ]);

    app.controller('fCtrl', function(){
        this.submitEdit = function(q){
             alert(q);
        }
    });

})();

But, doing that I can't catch anything. I've also tried using fiche.submitEdit({{q}}) , but it wouldn't work. Any brilliant idea, please?

Thanks a lot!

Answer 1

When you are using ng-model no need to pass the data, try it

<table ng-app="m">
<tr ng-controller="fCtrl">
<td>
    <span>
        <input type="checkbox" name="q" ng-model="qo" >
        <input type="checkbox" name="q" ng-model="qa" >
    </span>
</td>
<td>
    <button type="submit" class="btn btn-primary" ng-click="submitEdit()">Modifier</button>
</td>
</tr>
</table>
(function(){
var app = angular.module('m', [ ]);

app.controller('fCtrl', function($scope){
    $scope.qo = "";
    $scope.submitEdit = function(){
         alert($scope.qo);
    }
});

})();

Answer 2

I have never working with controller aliases. This should work?

(function(){
var app = angular.module('m', [ ]);

app.controller('fCtrl', ['$scope',function($scope){
    $scope.submitEdit = function(){
         alert($scope.qo);
    }
}]);

})();

And in html just call ng-click="submitEdit()"

Answer 3

To start with , always use a dot in ng-model . It almost appears that is what you were wanting to do and that you would have one object q when you submit.

The powerful part of ng-model is it will create the scope objects if they don't already exist.

In your case if you changed the ng-model 's to qa and qo your method would work and you would have one object q in scope with properties a and o .

However you have also set up a controller alias so now you need to prefix all your html scope variables with that controller alias

<input type="checkbox" name="q" ng-model="fiche.q.o" >
<input type="checkbox" name="q" ng-model="fiche.q.a" >

<button ng-click="fiche.submitEdit(fiche.q)">


 $scope.submitEdit = function(q){
     alert($scope.q.o);
}

There really is no need to pass the object as argument since it already exists in scope as $scope.q