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

目标： 当所选选项的值等于“其他*”时，能够运行函数。现在这被设置为一个简单的console.log。目前在控制台中什么也没有。

任何指针？

使用 Reset() 函数更新：

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

PookycountryChanged()从你的删除ng-change，然后删除包装你的功能$watch。在函数中设置观察者是没有意义的，因为无论如何手表都会一直运行。

还将您的选项更改为：

<option value="OTHER*">OTHER*</option>

然后你需要删除周围的引号data.country_id：

scope.$watch('data.country_id', function(){
  if (data.country_id === "OTHER*") {
    console.log('this is the other option selected');
  }
});
于 2015-07-08T13:50:38.707 回答
2

现在您的代码有一些问题：在PookycountryChanged您不检查值data.country_id只是创建另一个手表时，也在手表中比较字符串“data.country_id”和字符串“OTHER*”，所以它总是错误的。

如果您在手表功能中选择value=""模型设置值为so 的项目，您可以像下面的代码片段一样检查它。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 回答