Question

我有一个使用ng-options指令的选择。

我想根据所选的选项为$scope分配第二个值。

  $scope.options = [
   {name: 'Apple', id: '1'},
   {name: 'Orange', id: '2'},
   {name: 'Banana', id: '3'},
   {name: 'Pear', id: '4'},
  ];

请参阅plunker。

我正在尝试根据所选的option.name声明option.id，以便我可以在$http.post中传递它。

基本上就像一个隐藏的领域。这是ng-init或其他什么工作吗？

谢谢！

以下是完整的plunker代码。

HTML

<!DOCTYPE html>
<html ng-app="select">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="script.js"></script>
  </head>

  <body ng-controller="SelectController">
<div class="form-group col-md-3">
    <label for="select1">Select 1:</label>
    <select ng-model="newForm.select1"
            ng-options="option.name as option.name for option in options | filter: newForm.select2 && {name: '!' + newForm.select2} | filter: newForm.select3 && {name: '!' + newForm.select3}" 
            class="form-control">
        <option value=""></option>
    </select>
</div>
<div class="row"><br></div>
    <div class="form-group col-md-3">
    <label for="select2">Select 2:</label>
    <select ng-model="newForm.select2" 
            ng-options="option.name as option.name for option in options | filter: newForm.select1 && {name: '!' + newForm.select1} | filter: newForm.select3 && {name: '!' + newForm.select3}" 
            class="form-control">
        <option value=""></option>
    </select>
</div>
    <div class="row"><br></div>
    <div class="form-group col-md-3">
    <label for="select2">Select 3:</label>
    <select ng-model="newForm.select3" 
            ng-options="option.name as option.name for option in options | filter: newForm.select1 && {name: '!' + newForm.select1} | filter: newForm.select2 && {name: '!' + newForm.select2}" 
            class="form-control">
        <option value=""></option>
    </select>
</div>
<div>
  <pre>
    <code>
      Select 1: Name:{{ newForm.select1 }} Id:{{ newForm.select1.id }}
    </code>
  </pre>
</div>
  </body>

</html>

JS

var app = angular.module('select', []);

app.controller('SelectController', function($scope) {

  $scope.options = [
    {name: 'Apple', id: '1'},
    {name: 'Orange', id: '2'},
    {name: 'Banana', id: '3'},
    {name: 'Pear', id: '4'},
  ];

});

Answer 1

来自ngOptions文档：

当选择菜单中的项目时，所选选项表示的数组元素或对象属性将绑定到ngModel指令标识的模型。

第一个表单的ng-model绑定到newForm.select1。这意味着第一个表单的选定选项可通过以下方式获得：

$scope.newForm.select1

<select>元素中的选项值必须是$scope.options数组中的项目：

<select ng-model="newForm.select1"
            ng-options="option as option.name for option in options | filter: newForm.select2 && {name: '!' + newForm.select2} | filter: newForm.select3 && {name: '!' + newForm.select3}" 
            class="form-control">
  <option value=""></option>
</select>

如何根据ng-options设置隐藏值？

1 个答案: