使用 ng-show on 選項選擇 angularjs

Question

我想將我的輸入字段綁定到我的選擇選項。 所以如果選擇選項是是，輸入字段應該是可見的，如果它是否，輸入字段應該是隱藏的。

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

這是一個工作示例，可以滿足您的要求：

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

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

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'
  }];
});