Getting hardcoded value from input tag into angular controller

Question

I am using angularjs in my application.I am trying to pass hardcoded value from input tag into angularjs controller.Here i am not taking any dynamic values.User just clicks the input area.Based on clicked area i am passing value into angular controller.

Here is my html

    <div class="first-hour">
    <input type="text" value="12:00am - 12:30am" readonly>
    </div>
    <div class="second-hour">
    <input type="text" value="12:30am - 01:00am" readonly>
    </div>

If the user select first input text box value is 12:00am - 12:30am and if second means value is 12:30am - 01:00am.I need to get these values inside angular controller.Can anyone tell how to get the input hardcoded values directly into angularjs controller?

You are thinking backwards with AngularJS, [Don't design your page, and then change it with DOM manipulations](https://stackoverflow.com/a/15012542/8495123) — Aleksey Solovey, Feb 07 '18 at 12:21
I need to pass the value based on selected input field.The values i need to assign to each input field and pass it to controller — Sachin HR, Feb 07 '18 at 12:23

score 0 · Answer 1 · edited Feb 07 '18 at 12:22

0

You can try like this, create one object and initialize value in controller itself. then bind the object in html,

$scope.client = {};
$scope.client.start = "12:00am - 12:30am";

in html page,

<div class="first-hour">
    <input type="text" ng-model="client.start" readonly>
</div>

please let me know if u have any quires.

edited Feb 07 '18 at 12:22

Rakesh Chand

3,105
1
20
41

answered Feb 07 '18 at 12:21

Balasubramanian

700
7
26

If i give ng-model it displays the values.I dont want to display values in input field.I just want to get the values after clicking the field – Sachin HR Feb 07 '18 at 12:44

score 0 · Accepted Answer · answered Feb 07 '18 at 12:30

Here is an example of how you can select a specific filed. Both ranges have to be initialised in the Controller:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.range1 = "12:00am - 12:30am";
  $scope.range2 = "12:30am - 01:00am";

  $scope.select = function(val) {
    $scope.display = angular.copy(val);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="first-hour">
    <input type="text" ng-model="range1" ng-click="select(range1)" readonly>
  </div>
  <div class="second-hour">
    <input type="text" ng-model="range2" ng-click="select(range2)" readonly>
  </div>
  Selected: {{display}}
</div>

(value was replaced with ng-model)

If i give ng-model it displays the values.I dont want to display values in input field.I just want to get the values after clicking the field — Sachin HR, Feb 07 '18 at 12:43
@SachinHR your example would also display the values, what's the difference? — Aleksey Solovey, Feb 07 '18 at 12:49

Getting hardcoded value from input tag into angular controller

2 Answers2