Andres Andres - 2 months ago 20
AngularJS Question

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.


<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.

<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>

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.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.