angularjs how to access mulitple input fields from a form inside controller

Question

How do I access the individual input names defined in a form inside my controller?

rates.rateName
rates.rateBitrate
rates.rateWidth
rates.rateHeight

This does not work: var url = {{ tmp + data.rateName }};

I need to extract one of the input values from the form and append it to the url to be used with a $http POST. I need to put the rest of the inputs from the form (all together) into the POST as well as json blob.

        <div ng-controller="RateCtrlAdd">
      <rd-widget>
        <rd-widget-header icon="fa-users" title="Rates">
	    </rd-widget-header>
      </rd-widget>
      <p></p>

    <div class="row">
      <div class="col-sm-6">
        <form name="myForm" ng-submit="SendData()">
        <input class="form-control input-lg" type="text"
          placeholder="rate name"
          name="rates.rateName"
          ng-model="rates.rateName" required/>
        <br>
        <input class="form-control input-lg" type="text"
          placeholder="rate bit rate"
          name="rates.rateBitrate"
          ng-model="rates.rateBitrate" required/>
        <br>
        <input class="form-control input-lg" type="text"
          placeholder="rate width"
          name="rates.rateWidth"
          ng-model="rates.rateWidth" required/>
        <br>
        <input class="form-control input-lg" type="text"
          placeholder="rate height"
          name="rates.rateHeight"
          ng-model="rates.rateHeight" required/>
        </form>
       </div>
    </div>

<div class="row" style="margin-top: 12px;">
  <div class="col-sm-6">
    <button class="btn btn-success btn" value="Send" ng-click="SendData()">
        Add
    </button>
    <a href="/rates" class="btn btn-danger btn">
      Cancel
    </a>
  </div>
</div>
    
</div>

    'use strict';

    angular.module('RDash')
    .controller('RateCtrlAdd', ['$scope', '$http', function($scope, $http) {

    console.log('RateCtrlAdd - enter...');

    $scope.SendData = function () {
        var data = $scope.rates;
                
        console.log('RateCtrlAdd - rates from input form: ', $scope.rates);

        var tmp = 'http://10.10.15.145:8085/lms/outputstream/';
        var url = {{ tmp + data.rateName }};
        
        console.log('RateCtrlAdd - url: ', url);
 
    }; // end function()
        
    console.log('RateCtrlAdd - ...exit');
        
    }]); // end controller()

Saurabh Agrawal · Accepted Answer · 2017-02-22 02:05:02Z

1

You cant use binding expression i.e. {{}} in controller. Add it using simple javascript

Try this

 var url = tmp + data.rateName;

answered Feb 22, 2017 at 2:05

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs how to access mulitple input fields from a form inside controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related