CODEWITHSUNDEEP
javascriptangularjs
Tapan Bavaliya
Tapan Bavaliya

Reputation: 155

how to change ng-option value based on select ng-model value

i have view code like this

<div ng-repeat="location in Locations">
    <ng-form name="callForm">
        <div class="clearfix">
            <div class="col-xs-8">
                <div class="col-xs-4">
                    <label style="margin-top:6px;">
                    {{pubs.publisher}}:
                    </label>
                </div>
                <div class="col-xs-8">
                    <select class="form-control" ng-model="location.call_result_id">
                        <option ng-repeat="Result in Results" value="{{Result.id}}">{{Result.label}}</option>
                    </select>
                </div>
            </div>
        </div>
    </ng-form>
    <br>
</div>

my locations array have

$scope.Locations = [
{
"id": "1",
"p_id": 22,
"publisher": "Bing",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
},
{
"id": "2",
"p_id": 32,
"publisher": "Local",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
}
]

result array contain 

$scope.results = [
{
"id": 1,
"label": "No Answer",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 2,
"label": "Busy",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 3,
"label": "Call",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 4,
"label": "Verification",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 5,
"label": "triggered",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 6,
"label": "Issue",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 7,
"label": "Support",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 8,
"label": "null",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}
]

now my question is that

when my select box ng-model location.call_result_id become 1 it means that ng-option value Result.id become 1

means user select first option at lthat time i want to update all the ne-repeat's select box ng-model value become 1 and Result.id become 1 also

it means that if user select first option then automatically all select box selected to first option

can anybody tell me how to do this.

Upvotes: 0

Views: 510

Answers (1)

Wahid Kadwaikar
Wahid Kadwaikar

Reputation: 768

I hope this helps.

index.html

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script src="application.js"></script>
</head>

<body ng-app="demo" ng-controller="demoController">
  <div ng-repeat="location in Locations">
    <ng-form name="callForm">
      <div class="clearfix">
        <div class="col-xs-8">
          <div class="col-xs-4">
            <label style="margin-top:6px;">
              {{selectedID}} {{location.publisher}}:
            </label>
          </div>
          <div class="col-xs-8">
            <select class="form-control" ng-model="call_result_id" 
                    ng-options="r.id as r.label for r in results"
                    ng-change="setAllDropDowns(call_result_id)">
              <option value="" disabled="">Select One</option>
            </select>
          </div>
        </div>
      </div>
    </ng-form>
    <br>
  </div>

</body>

</html>

application.js file should be like:

angular.module('demo', [])
  .controller('demoController', function($scope) {

    $scope.Locations = [{
      "id": "1",
      "p_id": 22,
      "publisher": "Bing",
      "status_id": 12,
      "notes": "",
      "callback_at": "",
      "call_result_id": ""
    }, {
      "id": "2",
      "p_id": 32,
      "publisher": "Local",
      "status_id": 12,
      "notes": "",
      "callback_at": "",
      "call_result_id": ""
    }, {
      "id": "3",
      "p_id": 32,
      "publisher": "new",
      "status_id": 12,
      "notes": "",
      "callback_at": "",
      "call_result_id": ""
    }];

    $scope.results = [{
      "id": 1,
      "label": "No Answer",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 2,
      "label": "Busy",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 3,
      "label": "Call",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 4,
      "label": "Verification",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 5,
      "label": "triggered",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 6,
      "label": "Issue",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 7,
      "label": "Support",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }, {
      "id": 8,
      "label": "null",
      "created_at": "2015-04-03 11:13:47",
      "updated_at": "2015-04-03 11:13:47"
    }]


    $scope.setAllDropDowns = function(inputId) {
      $scope.call_result_id = inputId;

    }




  });

Upvotes: 2

Related Questions