【问题标题】:Why doesn't an input modify a value outside of an ng-repeat (and ng-switch)?为什么输入不修改 ng-repeat(和 ng-switch)之外的值?
【发布时间】:2012-08-09 14:07:48
【问题描述】:

我假设范围问题是此示例中的输入可以修改它旁边的值但不能修改其他值的原因。如果是这种情况,我如何将模型连接到正确的范围?如果不是范围问题,那我做错了什么?

<html ng-app>
    <head>
        <script type="text/javascript" src="angular-1.0.1.min.js"></script>
        <script type="text/javascript">
            function ExampleCtrl($scope) {
                $scope.list = [
                    { name: "a" },
                    { name: "b" },
                ];

                $scope.value = 5;
            }
        </script>
    </head>
    <body ng-controller="ExampleCtrl">
        <ul ng-repeat="item in list">
            <li>{{ item.name }}
                <ng-switch on="item.name">
                    <span ng-switch-when="b">
                        <input type="number" ng-model="value" />
                        {{ value }}
                    </span>
                </ng-switch>
            </li>
        </ul>

        value is {{ value }}
    </body>
</html>

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    另一种方式 - 您可以使用 $parent 访问父范围。

    <input type="number" ng-model="$parent.$parent.value" />
    

    查看示例:http://jsfiddle.net/7Hh2R/

    【讨论】:

    • 顺便问一下,$parent 记录在哪里?我似乎无法在网站上找到它。
    • @Chas.Owens 我在 $parent 上找不到文档。我是从邮件列表中知道的。它被定义为here。而且我知道至少还有一件未记录的事情 - ngValue directive
    • 实际上,使用 $parent 是一种 hack。我建议你引入模型对象($scope.editngItem = { value: '' }; 和该模型对象的引用字段:`ng-model='editingItem.value'```。这是更好的方法。
    • 文档状态:“该指令创建新范围”。对于新手来说,不清楚这意味着什么。但这个答案肯定有帮助。
    【解决方案2】:

    ngRepeatngSwitch 创建不同的范围是对的。您可以使用很棒的 Chrome 开发者工具 AngularJS Batarang 来查看不同的作用域。

    您可以在代码中引用相同值的一项更改是引用对象属性而不是原始类型,例如:

    $scope.value = { val: 5 };
    

    并绑定到:

    <input type="number" ng-model="value.val"/>
    {{ value.val }}
    

    我很想看看是否有更好的方法来处理不同范围的这个问题。

    【讨论】:

    • 嗯,这行得通,但我真的希望有更好的解决方案。
    猜你喜欢
    • 1970-01-01
    • 2013-11-23
    • 1970-01-01
    • 2012-09-03
    • 1970-01-01
    • 2014-06-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多