Как передать данные из input в контроллер?

Question

[tupoi]

Добрый вечер, есть контроллер, который делает Post request на сервер

app.controller('PostReq', function ($scope, $http) {
    $scope.sendReq = function(name, color, age){
        alert(name);
        var intAge = parseInt(age);
        $http({method: 'POST',
        url: 'http://127.0.0.1:8000/api/cat/',
        data: {name: name, color: color, age: intAge}
    });
}});

Есть поля для ввода данных

<div layout-gt-sm="row" ng-controller="PostReq">
        <md-input-container flex ng-model="catName">
          <label>Name</label>
          <input type="text"/>
        </md-input-container>
            <md-input-container flex ng-model="catColor">
          <label>Color</label>
          <input type="text"/>
        </md-input-container>
            <md-input-container flex ng-model="catAge">
          <label>Age</label>
          <input type="text"/>
        </md-input-container>
            <md-button class="md-raised md-warn" ng-click="sendReq(catName, catColor, catAge)">Create cat</md-button>
        </div>

Каким образом можно передать введенные данные в input в контроллер по нажатию кнопки?

Answer 1

[Markus Kelvin]

Вообще то ng-model нужно писать в input тэг а не в md-input-container

пользуйся ng-controller="PostReq as pr" чтобы область видимость была локальной а не глобальной, тогда все переменные с pr.***** будут именно локальны для котроллера PostReq.

<div layout-gt-sm="row" ng-controller="PostReq as pr">
        <md-input-container flex>
          <label>Name</label>
          <input type="text" ng-model="pr.catName"/>
        </md-input-container>
            <md-input-container flex >
          <label>Color</label>
          <input type="text" ng-model="pr.catColor"/>
        </md-input-container>
            <md-input-container flex >
          <label>Age</label>
          <input type="text" ng-model="pr.catAge"/>
        </md-input-container>
            <md-button class="md-raised md-warn" ng-click="pr.sendReq()">Create cat</md-button>
        </div>

Данные нет смыслы вкладывать так как они уже в скопе.
А контроллер должен быть таким:

app.controller('PostReq', function ($scope, $http) {
    $scope.sendReq = function() {
        alert( $scope.catName);
        var intAge = parseInt($scope.catAge);
        $http({method: 'POST',
        url: 'http://127.0.0.1:8000/api/cat/',
        data: {name: $scope.catName, color: $scope.catColor, age: intAge}
    });
}});

Answer 2

[Frozen Coder]

Я сам новичок и md-input-container не использую, вместо этого ng-model (двухсторонний биндинг) пишу к input и введенные данные доступны в контроллере в $scope. Например, $scope.catName. Т. е. по нажатию на кнопку вы можете сразу брать данные из $scope в контроллере.