Javascript 在ng repeat外部创建新范围

这个想法是如何通过按下文本旁边的按钮来修改文本列表。我们还可以将其应用于列表之外的标题文本

HTML:

我不确定我写得对不对。但是，除了标题中的“编辑”按钮（当我仅尝试编辑标题时），它意外地编辑了其子范围内的所有文本外，其他一切都正常工作

---

我想做的是给标题一个新的作用域，这样按钮就不会影响其他文本，因为它不是任何作用域的父项。

为什么不为ng repeat使用另一个变量名（我已经创建了第二个text=>txt）。最好使用单独的函数来更新列表和文本，但如果需要，可以尝试

<div ng-controller="TextController">
    <div class="title">
        <span>{{ text }}</span>
        <button ng-click="edit()">Edit</button>
    </div>

    <ul>
        <li ng-repeat="txt in list">
            <span>{{ txt }}</span>
            <button ng-click="edit($index)">Edit</button>
        </li>
    </ul>
</div>

---

为什么不为ng repeat使用另一个变量名（我已经创建了第二个text=>txt）。最好使用单独的函数来更新列表和文本，但如果需要，可以尝试

<div ng-controller="TextController">
    <div class="title">
        <span>{{ text }}</span>
        <button ng-click="edit()">Edit</button>
    </div>

    <ul>
        <li ng-repeat="txt in list">
            <span>{{ txt }}</span>
            <button ng-click="edit($index)">Edit</button>
        </li>
    </ul>
</div>

---

是的，你想做的是对的：

---

{{text}

变量绑定到同一控制器作用域。因此，编辑按钮只是更新该值，使其在任何地方都可以更改

是的，您尝试的是正确的：

---

{{text}

变量绑定到同一控制器作用域。因此，“编辑”按钮只更新该值，使其在任何地方都可以更改

您应该尝试更新$scope.list值： 更新范围时，html将呈现

$scope.edit = function() {
    $scope.list[this.$index] +=  " world";
};

请查看演示：

---

您应该尝试更新$scope.list值： 更新范围时，html将呈现

$scope.edit = function() {
    $scope.list[this.$index] +=  " world";
};

请查看演示：

您可以创建一个与ng模板组合的“包含”，以便获得一个新范围

{{text}}
编辑


{{text}}
编辑

您可以创建一个与ng模板相结合的“包含”，以便获得一个新范围

{{text}}
编辑


{{text}}
编辑

你能提供一把小提琴吗？如果你没有在其他地方定义该模块，那么它应该是

angular.module（“应用程序”，[]）。

@AlonEitan是的，它是在其他地方定义的1。为了拥有每循环笔划控制器，您应该在li中定义一个。2.或者，您可以在

ul

级别声明一个，这样主ctrl键就不会受到影响。请记住在新控制器中将

this.text+=

修复为

$scope.text+=

，您可以提供小提琴吗？如果您没有在其他地方定义模块，那么它应该是

angular.module（“app”，[]）。

@AlonEitan是的，它是在其他地方定义的1。为了拥有每循环笔划控制器，您应该在li中定义一个。2.或者，您可以在

ul

级别声明一个，这样主ctrl键就不会受到影响。记住在新控制器中将

this.text+=

修复为

$scope.text+=

，编辑功能将修改

$scope.text

。我想知道是否可以对标题和列表使用相同的功能编辑功能将修改

$scope.text

。我想知道我是否可以对标题和列表使用相同的函数

$scope.edit = function() {
    $scope.list[this.$index] +=  " world";
};

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-include src="'myTemplate.htm'">

</div>

    <ul>
        <li ng-repeat="text in list">
            <span>{{ text }}</span>
            <button ng-click="edit()">Edit</button>
        </li>
    </ul>


    <script type = "text/ng-template" id = "myTemplate.htm">
     <div class="title">
        <span>{{ text }}</span>
        <button ng-click="edit()">Edit</button>
    </div>
   </script>

</div>

<div >

</div>