根据字符串和do函数检查ng-model的值

Check value of ng-model against string and do function

本文关键字：检查 ng-model 的值 函数 do 字符串      更新时间：2023-09-26

我有几个函数，我不得不混合，因为在<选择:

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() function 

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>

现在你的代码有一些问题:在PookycountryChanged中，你没有检查data.country_id的值，只是创建另一个手表，也在手表你比较字符串'数据。country_id'与字符串"OTHER*"，所以它总是false。

如果您选择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-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');
  }
});
相关文章：