Question

我想将输入字段绑定到select选项。因此，如果select选项为Yes，则输入字段应为可见，如果为No，则应隐藏输入字段。

(function(){

  var app = angular.module('spa',[

    $rootScope.options = [
      {
        id: 0,
        name: 'No'
      }, 
      {
        id: 1,
        name: 'Yes'
      }
    ]

  ]);  

}());


 <form name="newData" class="ng-scope ng-pristine ng-invalid ng-invalid-required" error-popup="newData" novalidate> 
    <div class="form-group item item-input item-select">
      <div class="input-label">
        Booking Fee Paid
      </div>
      <select name="booking" ng-model="user.booking" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-options="option.name for option in options track by option.id" ng-init ="user.booking = options[0]" required>
      </select>
    </div>  

    <div class="row" ng-show="user.booking.name == 'Yes'">
        <div class="col">
        <div class="form-group item item-input">
                <input type="text" name="amount" ng-model="user.amount" class="form-control" placeholder="Amount">
            </div> 
        </div>
    </div>
  </form>

http://plnkr.co/edit/v0NrbTeigo3lm1njRu9A?p=preview

感谢任何帮助

Answer 1

我建议你阅读初学者教程@ angularjs.org。

以下是一份工作样本，可以满足您的要求：

＆＃13;

angular.module('app', [])
    .controller('Sample', Sample);

function Sample() {
    this.options = [{
        id: 0,
        name: 'No'
    }, {
        id: 1,
        name: 'Yes'
    }];
    this.booking = this.options[0];
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Sample as vm">
    
    <select name="booking" ng-model="vm.booking" ng-options="option.name for option in vm.options"></select>
    
    <pre>{{ vm.booking | json }}</pre>
    
    <input type="text" ng-show="vm.booking.name === 'Yes'"/>
</div>

＆＃13;

Answer 2

第二个参数指定所需的模块而不是实现：

angular.module(name, [requires], [configFn]);

所以你注射了错误。这是固定代码：

http://plnkr.co/edit/L02U4Cq0HIqeLL1AOcbl

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

app.controller('MyController', function($scope) {
  $scope.options = [{
    id: 0,
    name: 'No'
  }, {
    id: 1,
    name: 'Yes'
  }];
});

使用ng-show选项选择angularjs

2 个答案: