Угловая ng-модель, не связанная с полями ввода

Question

У меня есть следующий контроллер, и я могу использовать ng-repeat для отображения объекта ONE json, который у меня есть. Я просто использовал ng-repeat, чтобы убедиться, что данные действительно натолкнулись. Но я не могу понять, как связать свои поля ввода, чтобы отображать данные внутри текстовых полей в этом окне/шаблоне редактирования.

Контроллер

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

контроллер работает, он принимает параметр с идентификатором и который используется, и пришитым к концу апите конечную точку 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> 

Так просто, чтобы подтвердить .... Dat a отправляется в vm.search, и это одна запись базы данных, которую я ожидаю, я знаю, потому что она отображается, когда я использую ng-repeat. Но когда я использую ng-model='vm.search.name', я не получаю данные, привязанные к полю, чтобы я мог его редактировать. Может ли кто-нибудь указать, что я делаю неправильно?

Как вы можете видеть ниже, я ввел некоторые тестовые данные и перешел на страницу редактирования этого элемента, name = asdf & userId = fec87a96-22d7-4e8c-8991-fa01df60c5c0. Каковы оба ожидаемых значения, но ничего не отображается в ограниченных текстовых полях с использованием той же модели vm.search.

Answer 1

Способ управления и просматривать разговаривать друг с другом через $ рамки. В вашем случае переменная vm контроллера является локальной для контроллера и недоступна для просмотра, поскольку вы объявляете ее как var vm.

Когда вы обращаетесь к vm в представлении, он фактически создает новую переменную vm и помещает ее в область видимости.

Для его исправления вам необходимо передать $ scope в качестве зависимости от контроллера и использовать $ 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 в вашем представлении, поскольку «vm» неявно ссылается на вид $ scope.vm.

Answer 2

Ответ был довольно прост здесь, благодаря Филу.Во-первых, я не использую ng-repeat в нижней части моего кода как способ тестирования, чтобы увидеть, если мои ценности были там, гораздо лучше использовать что-то вроде:

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

Это выплевывает (в код) фактический объект json, который хранится в vm.search и | 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": "/?" 
} 

Я знаю, что это кажется утомительным, чтобы объяснить все это, но для кого-то вроде меня, которые забывают это, это разница между вашей моделью связывания или не является обязательной для ввода значений для каждого текстового поля и даже несмотря на это очень просто, очень возможно, что другие нообы, подобные мне, не обратят на это внимания. Я уверен, что кто-то может лучше объяснить, в чем разница между ними.

Не стесняйтесь ANYONE, чтобы отредактировать мой ответ и лучше объяснить, особенно если для этого требуется меньше строк кода!