Question

我有一些我必须混合的功能，因为＆lt;＆lt;选择：

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。在当下没有在控制台中获得任何东西。

任何指针？

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

Answer 1

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

Answer 2

现在您的代码存在一些问题：在PookycountryChanged中，您没有检查data.country_id的值只是创建另一个监视，同时还要注意比较字符串数据.country_id'带字符串“OTHER *”所以它总是错误的。

如果您选择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>

检查ng-model对字符串的值并执行功能

2 个答案: