Bearbeiten und aktualisieren entsprechend der Benutzerauswahl in angularjs

Question

Ich versuche, das ausgewählte Element aus der main view Liste in einer separaten HTML-Ansicht zu bearbeiten, wenn also die save button angeklickt wird, werden die Änderungen in die Liste in der main view .Im meine reflektiert Bearbeiten Ich habe title, description, from und to Daten zu bearbeiten.Ich wurde mit einer Idee hier getroffen, das heißt, was ist, wenn der Benutzer nur eine der vier Details bearbeiten und die restlichen Details die gleiche speichern möchte, habe ich versucht es mit der ng-model aber es könnte nur die bearbeiteten Details aber nicht die bereits bestehende lesen. Also ich suche eine Hilfe dabei.

Html:

<div align="center"> 
      Title 
      <input type="text" ng-model="selectInput.Title"> 
      Offer: 
      <input type="text" ng-model="selectInput.data.description"> 
      Valid from: 
      <input type="date" ng-click="FromDate()" ng-model="frDate"> 
      <br> Valid till: 
      <input type="date" ng-click="ToDate()" ng-model="toDate" /> 
     </div> 
     <hr> 
     <button ng-click='SaveEdit($index)' ng-model="editSave"> Save</button> 

Controller:

$scope.items = []; 
    $rootScope.couponList = [{ Title: "Fruit Export Details" data: {description: "consume soon product", Fromdate: "2016-09-09", Todate: "2016-09-18"}}, 
    {Title: "Vegetables Export Details", data:{description: "consume soon product", Fromldate: "2016-11-09", Todate: "2016-10-19"}}, 
    { CouponTitle: "Saviours",data:{description: "storable", Fromldate: "2016-09-10", Todate: "2016-10-09"}}]; 

    $scope.select_item = function (key) { 
    //alert(key); 
    $scope.items.push(key); 

    } 
    $scope.SaveEdit=function(){ 
      $scope.Title=$scope.selectInput.data.Title; 
     $scope.description=$scope.selectedInput.data.description; 
     $scope.Fromdate=$scope.selectInput.data.Fromdate; 
     $scope.Todate=$scope.selectInput.data.Todate; 
     } 
     $state.go('app.WashType'); 
    } 

Answer 1

Ich glaube, Sie Problem sind, ist Inkongruenz von ng-Modellnamen in Ihrem Controller

HTML ( MODIFIED)

<div align="center"> 
       Title 
<!-- <input type="text" ng-model="selectInput.Title"> --> 
       <input type="text" ng-model="$scope.selectInput.data.Title"> 
       Offer: 
       <input type="text" ng-model="$scope.selectedInput.data.description"> 
       Valid from: 
<!-- <input type="date" ng-click="FromDate()" ng-model="frDate">--> 
       <input type="date" ng-click="FromDate()" ng-model="$scope.selectInput.data.Fromdate"> 
       <br> Valid till: 
<!-- <input type="date" ng-click="ToDate()" ng-model="toDate" /> --> 
       <input type="date" ng-click="ToDate()" ng-model="$scope.selectInput.data.Todate" /> 
      </div> 
      <hr> 
      <button ng-click='SaveEdit($index)' ng-model="editSave"> Save</button> 

JS

$scope.items = []; 
    $rootScope.couponList = [{ Title: "Fruit Export Details" data: {description: "consume soon product", Fromdate: "2016-09-09", Todate: "2016-09-18"}}, 
    {Title: "Vegetables Export Details", data:{description: "consume soon product", Fromldate: "2016-11-09", Todate: "2016-10-19"}}, 
    { CouponTitle: "Saviours",data:{description: "storable", Fromldate: "2016-09-10", Todate: "2016-10-09"}}]; 

    $scope.select_item = function (key) { 
    //alert(key); 
    $scope.items.push(key); 

    } 
    $scope.SaveEdit=function(){ 
      $scope.Title=$scope.selectInput.data.Title; 
     $scope.description=$scope.selectedInput.data.description; 
     $scope.Fromdate=$scope.selectInput.data.Fromdate; 
     $scope.Todate=$scope.selectInput.data.Todate; 
     } 
     $state.go('app.WashType'); 
    } 

Answer 2

Ihre ng-Modellwerte ausrichten nicht mit dem, was Sie in der Steuerung verwenden.

Die ersten beiden setzen eine Eigenschaft auf der selectInput Eigenschaft des $ Umfang und die data Eigenschaft auf der selectInput Eigenschaft auf den Umfang, aber $ Umfang scheint nie ein Objekt selectInput ihm zugewiesen zu bekommen, geschweige denn eine data mit Eigentum.

In Ihrem Controller, den Sie bei der Initialisierung sollte hinzufügen:

$scope.selectInput = {data:null}; 

Die dritte und vierte Felder haben Namen, die überhaupt mit dem Umfang nicht ausrichten.

HTML

<div align="center"> 
    Title 
    <input type="text" ng-model="selectInput.data.Title"> 
    Offer: 
    <input type="text" ng-model="selectInput.data.Description"> 
    Valid from: 
    <input type="date" ng-click="FromDate()" ng-model="selectInput.data.FromDate"> 
    <br> 
    Valid till: 
    <input type="date" ng-click="ToDate()" ng-model="selectInput.data.ToDate" /> 
</div> 
<hr> 
<button ng-click='SaveEdit()'> Save</button> 

-Controller

$scope.items = []; 
$rootScope.couponList = [...items here...]; 

$scope.select_item = function (key) { 
    //alert(key); 
    $scope.items.push(key); 
} 

$scope.SaveEdit = function(){ 
    // Do stuff with 
    // $scope.selectInput.data.Title; 
    // $scope.selectInput.data.Description; 
    // $scope.selectInput.data.FromDate; 
    // $scope.selectInput.data.ToDate; 
}