Question

我刚刚开始学习角度，试图制作某种SPA，但面临编辑数据的问题。该对象在控制台中可见，但它没有出现在页面上，我做错了什么？我的控制器在这里：

var app = angular.module("testModule", ['ngRoute']);

app.config(function ($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'pages/main.html',
        controller: 'addCtrl'
    })
    .when('/save', {
        templateUrl: 'pages/save.html',
        controller: 'editCtrl'
    })
    .when('/edit', {
        templateUrl: 'pages/edit.html',
        controller: 'addCtrl'
    })
})

app.service('dataService', function($http) {
  var data = {};
  data.list = [];
  var getData = function() {
     $http.get("model/data.json").then(function (response) {
      data.list = response.data;
    });
  }
  return {
    getDataFromJson: getData,
    getData: data,
  }
});

app.controller("mainCtrl", function($scope, dataService) {
    dataService.getDataFromJson();  
});

app.controller("editCtrl", function($scope, dataService) {
  $scope.data = dataService.getData;

  $scope.editData = function(adverse){
    $scope.adverse= adverse;
    console.log($scope.adverse)
  }
});

和页面的一部分：

<div class="panel">
    <form name="addForm" >
        <div class="well" >
            <div class="form-group">
                <label for="name">Name:</label>
                <input type='text' id="name" class="form-control" ng-model="adverse.name" placeholder={{adverse.name}} />
                <label for="shop">Shop:</label>
                <input type='text' id="shop" class="form-control" ng-model="adverse.shop" placeholder="{{adverse.shop}}" />
                <label for="begin">Begin:</label>
                <input id="begin" class="form-control" ng-model="adverse.begin" placeholder="{{adverse.begin}}" >
                <label for="end">End:</label>
                <input id="end" class="form-control" ng-model="adverse.end" placeholder="{{adverse.end}}" />   
                <button type="submit" class="btn btn-primary btn-block add_btn" ng-click="editData(adverse)">
                    <a href="#/">Edit</a>
                </button>
            </div>
        </div>
    </form>
</div>

这里还有一个截图：对象的道具假设在输入中，但它没有。 enter image description here

如果可能的话，你能举个例子说明我怎么能以另一种方式做到这一点吗？

Answer 1

在this plunker中重新创建了您的方案。但它的确有效。请看看这个plunker，你可以看到 StateProvider 代替 NgRoute

我看到哪一个不正确的是你在函数中发送不良对象，然后将参数设置为范围不对。问题是$ scope.adverse已经保存了值，因此您不需要传递值并再次将其设置为范围。记住范围是视图和ctrl之间的粘合剂

$scope.editData = function(){
    console.log($scope.adverse)
}

在AngularJS中编辑数据

1 个答案: