कोणीय जेएस में ng-repeat मानों को कैसे अपडेट करें?

मैं कोणीय जेएस के लिए नया हूं, मेरे पास एक सरणी है जिसे मैं ng-repeat निर्देश के माध्यम से लूप कर रहा हूं, और मैंने सरणी में मूल्यों को कॉपी, हटाने और संपादित करने के लिए कोड लिखा है।कोणीय जेएस में ng-repeat मानों को कैसे अपडेट करें?

अगर मैं हटाना या प्रतिलिपि बनाना चाहता हूं तो मैं कर सकता हूं? लेकिन अगर मैं संपादन पर क्लिक करता हूं तो एक पॉपअप बॉक्स वहां दिखाई देगा, मैं उन मानों को संपादित करना चाहता हूं जो अद्यतन मानों को सरणी में अपडेट करना चाहिए।

मैं इसे कैसे कर सकता हूं?

<!doctype html> 
<html> 
<head> 
<title>Angular app</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<style type="text/css"> 
    .listv{ 
    margin-bottom: 30px; 
    } 
    .editpopup{ 
    width: 250px; 
    height: 250px; 
    border: 1px solid black; 
    display: none; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 

    background-color:gray; 
    } 
    .editpopup-true{ 
    display: block; 
    } 
    .editpopup-false{ 
    display: none; 
    } 
    </style> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="myCon"> 
    <div ng-repeat="s in items" class="listv"> 
     <span>{{s.id}}</span> 
     <span>{{s.pname}}</span> 
     <button ng-click="removeStudent($index)">remove</button> 
     <button ng-click="copyrow($index)">copy</button> 
     <button ng-click="editrow($index)">edit</button> 
    </div></br> 

    <div class="editpopup editpopup-{{istrue}} "> 
     <p>edit id:<input type="text" ng-model="editedid"></p> 
     <p>edit pname:<input type="text" ng-model="editedname"></p> 
     <button ng-click="save($index)">save</button> 
     <button ng-click="closepopup()">cancel</button> 
    </div> 

    </div>

 var myApp=angular.module('myApp',[]); 
     myApp.controller('myCon',function($scope){ 
     $scope.items=[{id:1,pname:'box1'},{id:2,pname:'box2'}, {id:3,pname:'box3'}]; 

    $scope.removeStudent=function($index){ 
     $scope.items.splice($index,1); 
    } 
    $scope.copyrow=function($index){ 

    $scope.len=$scope.items.length; 
    $scope.ids=$scope.items[$index].id; 
    $scope.pnames=$scope.items[$index].pname 

    $scope.items.push({ 
      id:$scope.len+1, 
      pname:$scope.pnames 
     }); 
    } 
    $scope.editrow=function($index){ 
    $scope.istrue=true; 
    $scope.editedid=$scope.items[$index].id; 
    $scope.editedname=$scope.items[$index].pname; 
    } 
    $scope.closepopup=function(){ 
    $scope.istrue=false; 

    } 
    $scope.save=function($index){ 
    $scope.istrue=false; 
    $scope.s.name=$scope.editedname; 
    } 
});

यहाँ jsfiddle

स्रोत

2015-02-03 Dileep

सबसे आसान तरीका है angular.copy उपयोग करने के लिए वस्तु का क्लोन बनाने के लिए जब संपादित करें क्लिक किया जाता है है और फिर जब बचाने है डेटा को सरणी में आइटम में कॉपी करने के लिए क्लिक किया गया।

पहले initilize $scope.editedItem

$scope.editedItem = {};

editrow के लिए हम $ सूचकांक में वर्तमान में संपादित सूचकांक की दुकान और फिर $scope.editedItem में डेटा क्लोन।

$scope.editrow = function($index){ 
    $scope.istrue = true; 
    $scope.$index = $index; 
    angular.copy($scope.items[$index], $scope.editedItem); 
}

फिर save में हम डेटा वापस सरणी में वस्तु में क्लोन:

$scope.save = function(){ 
    $scope.istrue = false; 
    angular.copy($scope.editedItem, $scope.items[$scope.$index]) 
}

दृश्य अपडेट करने की आवश्यकता के बजाय editedItem उपयोग करने के लिए:

<div class="editpopup editpopup-{{istrue}} "> 
    <p>edit id:<input type="text" ng-model="editedItem.id"></p> 
    <p>edit pname:<input type="text" ng-model="editedItem.pname"></p> 
    <button ng-click="save()">save</button> 
    <button ng-click="closepopup()">cancel</button> 
</div>

JsFiddle

स्रोत

2015-02-03 12:02:07

यह मेरे लिए अच्छी तरह से काम किया, क्या कोई अन्य संभव तरीका है? या शायद Angular2 में? धन्यवाद – M98

सबसे पहले, पुराने मूल्य को बचाएं l आइक इस:

$scope.editrow=function($index){ 
    $scope.istrue=true; 
    $scope.oldValue = $scope.items[$index].id; // save the old id 
    $scope.editedid=$scope.items[$index].id; 
    $scope.editedname=$scope.items[$index].pname; 
};

फिर, जब आप को बचाने के लिए, बस पुराने मूल्य की मदद से सही वस्तु इस तरह खोजने के लिए और नए मूल्यों आवंटित:

$scope.save=function($index){ 
    $scope.istrue=false; 
    $scope.items.forEach(function (item) { 
     if(item.id == $scope.oldValue){ 
      item.id = $scope.editedid; 
      item.pname = $scope.editedname; 
     } 
    }); 
};

JsFiddle

स्रोत

2015-02-03 12:06:02

मैं इस किया था वही मुद्दा। यहाँ मेरी ठीक

मेरे मूल कोड है कि वस्तु

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
     <input type="text" ng-model="email" /> 
</div>

आइटम प्रयुक्त $ सूचकांक को अद्यतन नहीं किया करने के लिए ठीक से बाँध यह

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
     <input type="text" ng-model="vm.contactData.emails.other[$index]" /> 
</div>

यह बाध्यकारी एक बनाता था समस्या को फिर से खींचना क्योंकि यह नहीं जानता कि सरणी में अद्यतन आइटम उसी स्थान का संदर्भ दे रहा है जो उस स्थान पर था।इसे ठीक करने के लिए मुझे सरणी के स्वरूपण में थोड़ा बदलाव करना पड़ा।

['[email protected]','[email protected]']

[ 
    {'email': '[email protected]'}, 
    {'email': '[email protected]'} 
]

और

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
    <input type="text" ng-model="vm.contactData.emails.other[$index]" /> 
</div>

हो जाता है, जहां इनपुट क्षेत्र बन जाता है

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
     <input type="text" ng-model="vm.contactData.emails.other[$index].email" /> 
</div>

इन परिवर्तनों के बाद आप किसी भी फिर से ड्रा मुद्दों के बिना एक उचित बाँध होना चाहिए फोकस खो देता है।

स्रोत

2015-12-10 23:26:14

यह मेरे लिए काम किया !!!! लेकिन मुझे एनजी मॉडल में $ इंडेक्स हिस्से को पास करने की आवश्यकता नहीं थी –

पहले परिवर्तनीय $scope.getIndex=0; घोषित करें और जब आप सहेजें बटन क्लिक करते हैं तो आइटम सरणी से अनुक्रमणिका प्राप्त करें। फिर उस चर के लिए $index असाइन करें।

अब आप items[$scope.getIndex] नियंत्रक में कहीं भी प्राप्त कर सकते हैं। और मदद आप आइटम सरणी अद्यतन करने के लिए:

$scope.getIndex=0; 
$scope.editrow=function($index){ 
    $scope.getIndex=$index; 
    $scope.istrue=true; 
    $scope.editedid=$scope.items[$index].id; 
    $scope.editedname=$scope.items[$index].pname; 
} 

$scope.save=function($index){ 
    $scope.istrue=false; 
    $scope.items[$scope.getIndex].id=$scope.editedid; 
    $scope.items[$scope.getIndex].pname=$scope.editedname; 
}[enter link description here][1]

JSFiddle

स्रोत

2017-04-20 12:35:58

कोणीय जेएस में ng-repeat मानों को कैसे अपडेट करें?

उत्तर

संबंधित मुद्दे