CODEWITHSUNDEEP
angularjsinputdata-bindinginitialization
Andres
Andres

Reputation: 123

Angular - Data Bind Issue

So the main functionality I want is here, which is selecting an option from the drop-down menu and having it populate my input field.

JSFiddle: 

<div ng-app="app" ng-controller="MainCtrl">

 

Two things I want to fix:

  1. When typing into the input ("Email Subject") field I don't wan't it to change the drop-down menu option.

  2. I want the input field to initialize with it's placeholder value of ("Email Subject") instead of initializing with "Select a Canned Response"

I'm assuming this means making the input field have a one-way data bind, but I'm not sure how to do this, any help is appreciated.

Upvotes: 0

Views: 58

Answers (1)

BERGUIGA Mohamed Amine
BERGUIGA Mohamed Amine

Reputation: 6280

<div ng-app="app" ng-controller="MainCtrl">
  <input   ng-model="CannedResponse" placeholder="Email Subject"><!--change this-->
  <div class="item item-input item-select" >
    <div class="input-label">&nbsp;</div>
    <select ng-model="newSelectedITem" ng-options="CannedResponse as CannedResponse.label for CannedResponse in CannedResponses"
        ng-change="yourFunction()"> <!--change this-->
      <option value="{{item.value}}"> </option>
    </select>
  </div>
</div>

js code

angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    $scope.CannedResponses = [{
      label: 'Selet a Canned Response',
      value: 0
    }, {
      label: 'Hi there whats up',
      value: 1
    }, {
      label: 'Here is another response',
      value: 2
    }, {
      label: 'Why not select this one?',
      value: 3
    }];

     $scope.newSelectedITem = $scope.CannedResponses[0] //ADD THIS (X1) 
    $scope.CannedResponse='';//add this
    $scope.yourFunction = function() {//add this function
    $scope.CannedResponse = $scope.newSelectedITem.label;
     };

  });

see where I wrote change this. There where you have to change your code.

Upvotes: 1

Related Questions