如何更改每个angularjs的类似ng-repeat值

时间:2016-01-13 14:06:55

标签: javascript jquery angularjs

我想从显示的单个输入文本框中单独更改ng-repeat值, 我试图将输入框绑定到标签,但所有值绑定在一起,请你告诉我如何只更改选定的div值.. Working DEMO



var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function ($scope, $compile) {
    $scope.items = [];
    
    $scope.add_New = function (index) {
        var itemhtml = '<div ng-click="select()" class="content">//click here first// <div ng-repeat="item in items">{{$index + 1}}. {{item.name}}</div></div>';
        var item = $compile(itemhtml)($scope);
        angular.element(document.getElementById('drop')).append(item);
     };
     
     $scope.add = function () {
         $scope.items.push({ 
             name: "hi"
         });
     };

     $scope.select = function(){
         $scope.showItem = true;
     }
});
&#13;
/* Styles go here */
body{
    width:1000;
}
.add{
    width:300;
}
.show{
    width:400;
    float:right;
}
.content{
    border:1px solid blue;
}
&#13;
<!DOCTYPE html>
<html ng-app="myapp">

    <head>
        <link href="style.css" rel="stylesheet" type="text/css"/>

	    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
	    <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
    </head>

    <body ng-controller="AddCtrl">
        <button ng-click="add_New($index)">add Again</button>
        <div id="drop" class="add">
        </div>
        <div ng-show="showItem" class="show">
            <div ng-repeat="item in items">
                {{$index + 1}}.<input type="text" ng-model="item.name">
            </div>
            <button ng-click="add()">Add</button>

         </div>
    </body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我试了一下,尽力了解你的想法,得到了this点。

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function ($scope, $compile) {

    var id = 0;

    $scope.sections = [];

    $scope.addItem = function(section) {
      section.items.push('hi');
    }

    $scope.select = function(){
      $scope.showItem = true;
    }

    $scope.addNewSection = function(){
      id++;

      var newSection = {text: 'Section '+id, id: id, items: []};
      $scope.sections.push(newSection);
    }

});

和html。

<body ng-controller="AddCtrl">
    <button ng-click="addNewSection()">Add Section</button>


    <div ng-repeat="section in sections" class="content">

        {{section.text}} 

        <button ng-click="addItem(section)">Add</button>

        <div ng-repeat="item in section.items track by $index">
            {{$index}}. <input type="text" ng-model="item.name">  
        </div>
    </div>

</body>
相关问题