角结合模式不输入字段

Question

我有以下的控制工作，我可以用NG-重复显示ONE JSON对象我有。我只是用NG-重复，以确保数据实际上是未来跨越。但我无法弄清楚如何绑定我的输入字段显示在此编辑视图/模板中的文本字段中的数据。

调节器

angular
    .module("renderIndex", ["ngRoute","ngCookies"])
    .config(config)
    .controller("favoritesController", favoritesController)
    .controller("newFavoriteController", newFavoriteController)
    .controller("editFavoriteController", editFavoriteController);

function config($routeProvider) {
    $routeProvider

        //...left out for brevity

        .when("/editfavorite/:searchId", {
            templateUrl: "/ng-js/ng-templates/editFavoriteView.html",
            controller: "editFavoriteController",
            controllerAs: "vm"
        })
        .otherwise({ redirectTo: "/" });
};

//...left out for brevity

function editFavoriteController($http, $window, $routeParams) {
    var vm = this;
    vm.search = [];

    var url = "/api/favorites/" + $routeParams.searchId;
    $http.get(url)
        .success(function (result) {
            vm.search = result;
        })
        .error(function () {
            alert('error/failed');
        })
        .then(function () {
            //Nothing
        });
};

该控制器的工作原理，它接受ID的参数并且被用于与上涨到该API端点URL的结尾。我回来了良好的反响就是一个JSON对象，我能够使用vm.search，超过传递给视图，如果你在视图的底部发现我有一个ng-repeat（这是唯一的存在，因为我想确保一些数据实际上过来的电线，它是。当然，这只是重复一个记录，因为这是一个编辑页面，但它的作品，但我的绑定输入没有表示将视图呈现在文本字段任何东西。这有可能是一些简单，任何人都可以帮忙吗？

EditView中/角模板

<div class="small-12 column"><h3>Edit Search</h3></div>
<div class="small-12 column">
    <form name="editFavoriteForm" novalidate ng-submit="vm.update()">
        <input name="userId" type="hidden" ng-model="search.userId" />
        <label for="name">Name</label>
        <input name="name" type="text" ng-model="vm.search.name" />
        <label for="description">Description</label>
        <textarea name="description" rows="5" cols="30" 
                  ng-model="vm.search.description"></textarea>
        <input type="submit" class="tiny button radius" value="Save" /> | 
        <a href="#/" class="tiny button radius">Cancel</a>
    </form>
</div>
<div data-ng-repeat="s in vm.search">
    <p>{{s.name}} - {{s.userId}}</p>
</div>

所以只是重申....正在发送数据超过在vm.search，它是我期待一个数据库记录，我知道那是因为它显示，当我使用ng-repeat。但是当我使用ng-model='vm.search.name'我没有得到绑定到字段，以便我可以编辑的数据。任何人都可以指出我在做什么错？

正如你可以看到下面我把一些测试数据并到编辑页面用于该项目，名称=航空自卫队与用户id = fec87a96-22d7-4e8c-8991-fa01df60c5c0。这两者都是预期值，但没有使用相同的vm.search模型界文本字段显示出来。

Answer 1

答案在这里很简单，感谢菲尔。首先，我不应该被使用在ng-repeat我的代码的底部，测试的方法，如果我的价值在那里，它是更好的使用是这样的：

 <pre>{{ vm.search | json }}</pre>

该吐出来（在代码视图）是在vm.search举行和变量名后附加了| json只是帮助到JSON格式了页面上的实际JSON对象。如果你不使用它，你只想看到一个样样在行。如此反复@Phil，谢谢你的小费！

有一件事我没有意识到的是，从result叫我http.get我被压入到vm.search变量。实际上是一个数组。明明是你说的，但它没有对我黎明只从阵列之类的东西，在我的变量命名vm.search，而不是我在做这个抢到第一项：

$http.get("/api/favorites")
.success(function (result) {
    vm.searches = result;
})

而事实上，我本来应该这样做：

$http.get("/api/favorites")
.success(function (result) {
    vm.searches = result[0];
})

现在来看看区别，让我们拯救出来，我们从得到的结果

 <pre>{{ vm.search | json }}</pre>

使用每个方法中，首先，而不靶向第一个数组元素，我们得到：

[
  {
    "searchId": 91,
    "userId": "fec87a96-22d7-4e8c-8991-fa01df60c5c0",
    "name": "xxx123",
    "description": "123xxx",
    "created": "2015-03-11T01:12:37.32",
    "searchString": "/?"
  }
]

现在，如果我们提取结果使用后一种方法，直行为result[0]我们得到的结果作为对象，而不是只包含一个项目的阵列内的对象的第一个元素。

{
  "searchId": 91,
  "userId": "fec87a96-22d7-4e8c-8991-fa01df60c5c0",
  "name": "xxx123",
  "description": "123xxx",
  "created": "2015-03-11T01:12:37.32",
  "searchString": "/?"
}

我知道这似乎有些单调乏味来解释这一切，但对于像我这样谁忽视它，这是与你的模型绑定或不具约束力的输入值，以每个文本字段，即使它是非常简单，它很可能其他的区别像我这样的菜鸟会忽略这一点。我敢肯定有人能更好地解释差异正是两者之间。

欢迎任何人都可以编辑我的答案和更好地解释，尤其是如果它需要较少的代码行这样做！

Answer 2

该方法控制器和视图搭腔另一种是通过$范围。在你的情况下，控制器的虚拟变量是本地的控制器，并且不可查看你的声明为var vm。

当您在视图访问虚拟机，它实际上创建了一个新的变量VM，并把它的范围。

要纠正它，你需要通过$范围为控制器的依赖，在你的控制器使用$ scope.vm。你的控制器看起来应该像：

function editFavoriteController($scope, $http, $window, $routeParams) {
    $scope.vm.search = [];

    var url = "/api/favorites/" + $routeParams.searchId;
    $http.get(url)
        .success(function (result) {
            $scope.vm.search = result;
        })
        .error(function () {
            alert('error/failed');
        })
        .then(function () {
            //Nothing
        });
};

有了这些你的视图和控制器，现在应该是指在$范围内提供同样的“虚拟机”的变量。

请注意，您不需要在视图中明确使用$ scope.vm为“虚拟机”是隐式是指$ scope.vm在视图中。