javascript - 我无法在 Angular 选择中显示值

Question

这是 HTML 代码:

    <div ng-controller="SelectCtrl">
        <p>selected item is : {{selectedItem}}</p>
        <p> age of selected item is : {{selectedItem.age}} </p>
        <select ng-model="selectedItem" ng-options="item.name for item in items">
        </select>
    </div>

这是 JavaScript 代码:

var app = angular.module('myApp', []);

app.controller('SelectCtrl', function($scope) {
    $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
    console.log($scope.selectedItem); //this is undefined :(
});

我想在 Controller 中显示选定的值，但显然它是未定义的。

什么才是正确的做法？

Answer 1

@JoshLeeDucks is correct . $scope.selectedItem当您尝试记录其值时，未在范围内定义。当用户通过选择 <select> 中的元素为属性分配值时输入 Angular 会识别出 selectedItem未定义并创建它。

使用 $watch 记录值:

console.log($scope.selectedItem); // undefined

$scope.selectedItem = 'someDefaultValue';

console.log($scope.selectedItem); // 'someDefaultValue'

$scope.$watch('selectedItem', function(newValue) {
    console.log(newValue); // whatever `item.name` the user has selected
});