Question

在我的HTML代码中，我有一个带有ng-model的select-options字段。想要在我的控制器中注册它的值，并在每次更改时查看。但是console.log（）将其显示为undefined。我尝试了$ scope。$ watch但它没有用。我该如何解决这个问题？

<select ng-model="selectedAge">
   <option value="none">None</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

Answer 1

根据您的要求使用手表是解决方案。写这样的手表

$scope.$watch('selectedAge', function(newVal, oldVal) {
    console.log(newVal)
})

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.obj = {};
  $scope.obj.showSelect = true
	$scope.$watch('obj.selectedAge',function(newVal, oldVal){
    console.log(newVal)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

<div ng-if="obj.showSelect">
  <select ng-model="obj.selectedAge">
   <option value="none">None</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select> 
</div></div>

<强> EDITED

你必须像这样在控制器内创建空对象。

 angular.module("app", [])
    .controller("ctrl", function($scope) {
        $scope.obj = {};
        $scope.obj.showSelect = true
        $scope.$watch('obj.selectedAge', function(newVal, oldVal) {
            console.log(newVal)
        })
    })

检查上面的更新演示。

原因是ng-if指令和其他指令一样创建子范围。所以你需要创建一个对象并通过该对象分配值。

<强> PS 尝试使用ng-change而不是$ scope。$ watch（）;因为$ watch是角度应用程序性能的不良做法。

从Angular中的select-options字段中获取数据

1 个答案: