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-model名称不匹配

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-model值与您在控制器中使用的内容不一致。

前两个在作用域的selectInput属性上设置了一个属性，在作用域上的data属性上设置了selectInput属性，但$ scope似乎永远不会得到一个对象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;
}

如何根据用户在angularjs中的选择进行编辑和更新

2 个答案: