使用 ng-model 在 p 元素中显示输入值答案

【问题标题】：Using ng-model to display input value in p element使用 ng-model 在 p 元素中显示输入值
【发布时间】：2018-03-10 11:36:17
【问题描述】：

我正在使用一个名为 slick 的滑块模块。我有一个标签标题，它跟踪并显示幻灯片的索引，以便用户查看。问题是标签标题与每张幻灯片一起滑动，因为该标签位于轮播内部（显然）。

我将选项卡标题移出幻灯片，并计划显示以使用ng-model 和ng-value 将数据绑定到幻灯片外部的元素。像这样：

<div>
     <p>Blue Renewal {{vm.slide.number}} of {{$ctrl.blueRenewals.length}}</p>
</div>
<slick data="$ctrl.phaseArr" >
     <div ng-repeat="item in $ctrl.phaseArr">
        <div>
            <input type="text" ng-model="vm.slide.number" ng-value="{{$index + 1}}">
        </div>
    </div>
</slick>

在 .js 中：

vm.slide = {
    number: '1'
}

问题

为什么输入的值没有绑定到光滑轮播之外的 p 元素？

【问题讨论】：

不要同时使用 ng-model 和 ng-value。从输入元素中删除 ng-value。 ng-model 已经为您的输入赋值
但它是我需要在p元素中显示的幻灯片的索引值？
您不能将 ng-model 与 p 一起使用。 ng-model 用于用户输入元素，如输入框、复选框、选择等
是的，但我可以将用户输入元素的值绑定到其他元素，但不能吗？
我们在这里看不到太多代码。您是否明确地将vm 放在控制器的 $scope 上？

标签： javascript angularjs

【解决方案1】：

用这么少的代码很难说，但我怀疑你遇到了范围问题。

这里至少有两个，可能至少三个级别的范围。您的标题在您的控制器中访问其范围的属性。因此，当您绑定到 vm.slide.number 时，它正在查看您的范围。 'slick' 组件可能会创建自己的范围，这可能是 vm 的来源。如果是这种情况，您的视图（在 slick 范围的父级上）看不到它的属性。

（ngRepeat 也会创建子作用域，但我认为这不是问题。）

【讨论】：