在ng-repeat之外创建一个新范围

Question

The idea is how a list of texts can be modified by pressing the button next to the text. We can also apply it to the title text which is outside the list.

HTML:

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

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

JavaScript:

angular.module("app").
    controller("TextController", function($scope) {
        $scope.text = "hello";
        $scope.list = [....]; // list of texts;

        $scope.edit = function() {
            this.text += " world";
        };
    });

I'm not sure if I wrote it the right way. However, everything works fine except the edit button in the title which is when I'm trying to edit the title only, it accidentally edits all text which is in its children scope.

What I'm trying to do is to give the title a new scope so that the button doesn't affect other texts because it isn't a parent of any scope.

Answer 1

Why don't you use another variable name for ng-repeat(i have made second text => txt). It is better to have separate functions for updating list and text, but if you want, you can try

<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>

The view is passing $index of the array element:

    $scope.edit = function(listIndex) {
        if(listIndex) $scope.list[listIndex] += " world"
        else $scope.text += " world";
    };

Answer 2

Yeah What you are trying to do is right:

The {{text}} variable is bound to the same controller scope. so the edit button just updates that value which makes it to change everywhere

Answer 3

You should try to update $scope.list value: When you updated the scope, the html will render.

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

Please check the demo: http://jsfiddle.net/Lvc0u55v/7050/

Answer 4

You could create an "include" combined with an ng-template so that you get a new scope.

http://jsfiddle.net/pfeq0mwe/3/

<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>