如何观看ng-repeat中包含的ng-model?

时间:2015-02-03 09:14:02

标签: angularjs angularjs-ng-repeat angular-ngmodel

这是我的HTML代码:

<table>
            <tr ng-repeat="park in parkOptions.parks">
                <td>
                    <label for="{{park.park_id}}">
                        <input id="{{park.park_id}}" type="radio" name="connection" ng-model="$parent.currentPark" value="{{park.park_id}}" ng-click="selectValue('park',park)"/>{{park.park_name}}
                    </label>
                </td>
            </tr>
        </table>

我如何观察模型中的变化(我的意思是当我点击单选按钮时,我想看到$ watch另一个公园)

1 个答案:

答案 0 :(得分:1)

我有一个可以帮助你的工作版本 - Fiddle

HTML

<div ng-app ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl">
        <table>
            <tr ng-repeat="park in parkOptions.parks">
                <td>
                    <label for="{{park.park_id}}">
                        <input id="{{park.park_id}}" type="radio" name="connection" ng-model="parkOptions.currentPark" value="{{park.park_id}}" ng-click="selectValue(park)"/> {{park.park_name}}
                    </label>
                </td>
            </tr>
        </table>
        </div>
</div>

JS

function ParentCtrl($scope) {
}

function ChildCtrl($scope) {
    $scope.parkOptions = {};
    $scope.parkOptions.parks = [
        {park_id: '01', park_name: 'England Park'},
        {park_id: '02', park_name: 'France Park'}
    ];
    $scope.$watch('parkOptions.currentPark', function(newValue) {
        if (newValue != undefined) {
            console.log(newValue);
        }
    });
}

这可能不是您想要的(正如我在您的代码中看到$ parent),但我们可以通过您提供的任何进一步信息找到正确的解决方案。

我不使用$ parent,更喜欢发送和接收活动。