1

< select のスコープのために、いくつかの関数を混在させる必要があります。

HTML:

<!-- COUNTRY -->

    <select class="account--select" type="text" name="country" ng-model="data.country_id"
            ng-options="o.code as o.name for o in content.countries" ng-change="reset();PookycountryChanged()">
        <option value="">OTHER*</option>
    </select>

指令：

scope.PookycountryChanged = function() { 
           scope.$watch('data.country_id', function(){
                if ('data.country_id' == "OTHER*") {
                    console.log('this is the other option selected');
                }
           });
        }

目的: 選択したオプションの値が「OTHER*」に等しい場合に機能を実行できるようにするため。現在、これは単純な console.log に設定されています。現時点ではコンソールに何も表示されません。

ポインタはありますか？

Reset() 関数を使用した UPDATE:

scope.reset = function(){
            scope.isenabled = (scope.data.country_id == content.config.pca_country);
            scope.country = _.findWhere(scope.content.countries, {code : scope.data.country_id});
        };
        scope.reset();

更新 2: 生成されたマークアップ:

<select ng-change="reset()" ng-options="o.code as o.name for o in content.countries" ng-model="data.country_id" name="country" type="text" class="account--select ng-scope ng-valid ng-dirty"><option value="" class="">OTHER*</option><option value="0" selected="selected">United Kingdom</option></select>
4

2 に答える 2

2

ここで、コードにいくつかの問題があります。ちょうど create yet another watchPookycountryChangedの値をチェックしない場合、また watch で文字列 'data.country_id' を文字列 "OTHER*" と比較するため、常に false になります。data.country_id

value=""モデル設定値がそうであるアイテムをnullウォッチ機能で選択した場合は、以下のスニペットのように確認できます。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.reset = function() {
      $scope.isenabled = ($scope.data.country_id == $scope.content.config.pca_country);
      $scope.country = _.findWhere($scope.content.countries, {
        code: $scope.data.country_id
      });
    };
    $scope.content = {
      config : {pca_country: 3},
      countries: [{
        code: 1,
        name: 'name1'
      }, {
        code: 2,
        name: 'name2'
      }, {
        code: 3,
        name: 'name3'
      }, {
        code: 4,
        name: 'name4'
      }, {
        code: 5,
        name: 'name5'
      }, {
        code: 6,
        name: 'name6'
      }, {
        code: 7,
        name: 'name7'
      }]
    };
    $scope.$watch('data.country_id', function(newVal) {
      if (newVal === null) {
        console.log('selected others');
      }
    })
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="account--select" type="text" name="country" ng-model="data.country_id" ng-options="o.code as o.name for o in content.countries" ng-change="reset();">
    <option value="">OTHER*</option>
  </select>
{{country}}
</div>

または、リセット機能も回避できます

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.content = {
      config: {
        pca_country: 3
      },
      countries: [{
        code: 1,
        name: 'name1'
      }, {
        code: 2,
        name: 'name2'
      }, {
        code: 3,
        name: 'name3'
      }, {
        code: 4,
        name: 'name4'
      }, {
        code: 5,
        name: 'name5'
      }, {
        code: 6,
        name: 'name6'
      }, {
        code: 7,
        name: 'name7'
      }]
    };
    $scope.$watch('data.country_id', function(newVal, oldVal) {
      if (newVal !== oldVal && !newVal) {
        console.log('selected others');
      }
    })
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="account--select" type="text" name="country" ng-model="country" ng-options="o.name for o in content.countries" ng-change="data.country_id=country.code;isenabled=country.country_id==content.config.pca_country">
    <option value="">OTHER*</option>
  </select>
  {{country}}
</div>

于 2015-07-08T15:06:38.577 に答える