Question

我有查看这样的代码

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

我的位置数组有

$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": ""
}
]

结果数组包含

$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"
}
]

现在我的问题是

当我的选择框ng-model location.call_result_id变为1时，表示ng-option值Result.id变为1

表示用户选择第一个选项，我想更新所有ne-repeat的选择框ng-model值变为1，Result.id变为1

这意味着如果用户选择第一个选项，则自动将所有选择框选择为第一个选项

任何人都可以告诉我该怎么做。

Answer 1

我希望这会有所帮助。

<强>的index.html

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.3.15" 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 文件应该像：

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;

    }




  });

如何根据选择的ng-model值更改ng-option值

1 个答案: