CODEWITHSUNDEEP
javascriptjqueryangularjs
vijay
vijay

Reputation: 33

how to change same ng-repeat values and show only select values angularjs

UPDATED i want to change ng-repeat values separately, from shown single input text box, i'm trying to bind inputbox to label, but all values binding together, can u please tell me how to change only selected div values, i don't want to use ng-repeat to add values, pls tell me without using ng-repeat in start add again you can use ng-repeat further functions, form should be shown in certain position to change values in input box to label, can u pls solve this to me..?? 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;
        }
});
.add{
  position: absolute; height: auto; width: 200px; left: 0; right: auto; top: 0; bottom: 0;
}
.show{
  position: absolute; width: auto; left: 200px; right: 0; top: 0; bottom: 0;
    border:1px solid red;
float:right;
}
.content{
  border:1px solid blue;
}
<!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">
	<div class="add"><button ng-click="add_New($index)">add Again</button>
    <div id="drop">
        </div>
      </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>

Upvotes: 1

Views: 1882

Answers (1)

Kursad Gulseven
Kursad Gulseven

Reputation: 2008

You need to change your way of thinking of html elements. Forget about jQuery and focus on angular-way.

First, you don't need to deal with new html elements. We need to get rid of that var itemhtml and $compile(itemhtml). Second, you need to change your data model.

. * UPDATED BELOW HERE * .

See updated Plunker for details.

Your controller will be like that:

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

  $scope.itemGroups = [];

  $scope.addGroup = function () {
    $scope.itemGroups.push({ 
      items: []
    });
  };
  $scope.addItem = function (itemGroup) {
    itemGroup.items.push({ 
      name: "hi"
    });
  };
  $scope.editItemGroup = function (itemGroup) {
    $scope.selectedItemGroup = itemGroup;
  };
});

And your html should make use of ng-repeat like that:

<div ng-repeat="itemGroup in itemGroups" class="add">
  <button ng-if="itemGroup != selectedItemGroup"
          ng-click="editItemGroup(itemGroup)">Edit</button>
  <div ng-repeat="item in itemGroup.items">
    {{$index + 1}}.<label ng-bind="item.name"></label>
  </div>
  <button ng-click="addItem(itemGroup)">Add</button>
</div>
<div ng-repeat="item in selectedItemGroup.items">
  {{$index + 1}}.<input type="text" ng-model="item.name">
</div>
<button ng-click="editItemGroup(null)" ng-if="selectedItemGroup">Done editing</button>

Upvotes: 1

Related Questions