根据字符串检查 ng-model 的值并执行函数

Question

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

目标： To be able to have a function 运行 when the value of the option selected is equal to 'OTHER*'.现在这被设置为一个简单的 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>

Answer 1

从您的 ng-change 中删除 PookycountryChanged()，然后删除包装您的 $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 的值只是创建另一个 watch，也在 watch 中您将字符串 'data.country_id' 与字符串 "OTHER*" 进行比较，因此它始终为假。

如果你 select 项目 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 的值并执行函数

Check value of ng-model against string and do function

javascript

angularjs

angularjs-ng-change