如何在angularjs中根據用戶的選擇進行編輯和更新

Question

我試圖在單獨的html視圖中編輯main view列表中的所選項目，因此單擊save button時，更改將反映到main view中的列表中。我的我的編輯我已經使用title,description,from和to日期編輯。我在這裏碰到一個想法，那就是，如果用戶只想編輯四個細節中的任何一個並保存其餘細節相同，我試過了它與ng-model，但它只能讀取編輯的細節，但不能讀取已經存在的細節。所以我正在尋找這方面的幫助。

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> 

控制器：

$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

我覺得你的問題是NG-型號名稱不匹配在您的控制器

HTML（改進）

<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

你的NG-模型值不跟你正在使用的控制器是什麼排隊。

前兩集在$範圍的selectInput財產上的範圍selectInput屬性data屬性的屬性，但$範圍似乎從來沒有得到分配給它的對象selectInput，沿着它具有data讓屬性。

在你的控制器，你應該初始化過程中添加：

$scope.selectInput = {data:null}; 

第三和第四場具有不與範圍排隊的所有名稱。

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> 

控制器

$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; 
}