Angular ng-model 未绑定到输入字段

Question

I have the following controller working and I can use ng-repeat to display the ONE json object I have. I just used ng-repeat to make sure the data was actually coming across. But I can't figure out how to bind my input fields to show the data inside the text fields in this edit view/template.

Controller

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

The controller works, it accepts a parameter of id and that is is used and tacked onto the end of the api endpoint URL. I get back a good response that is one json object, I am able to pass that over to the view using vm.search and if you notice at the bottom of the view I have a ng-repeat (which is only there because I wanted to make sure that some data was actually coming over the wire and it is. Of course it only repeats one record because this is an edit page, but it works, but my binded inputs are not showing anything in the text fields when the view renders. This has to be something simple, can anyone help?

EditView/Angular Template

<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>

So just to reiterate.... Data is being sent over in vm.search and it is the one database record that I am expecting, I know it is because it displays when I use ng-repeat . But when I use ng-model='vm.search.name' I don't get the data bound to the field so that I can edit it. Can anyone point out what I am doing wrong?

As you can see below I put some test data in and went to the edit page for that item, name=asdf & userId=fec87a96-22d7-4e8c-8991-fa01df60c5c0. Which are both expected values, but nothing shows up in the bounded text fields using the same vm.search model.

Answer 1

The answer was pretty simple here, thanks to Phil. First off I should not have been using ng-repeat at the bottom of my code as a way of testing to see if my values were there, it is much better to use something like:

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

This spits out (in a code view) the actual json object that is being held in vm.search and the | json | json appended after the variable name just helps to format the json out on the page. If you did not use it you would just see everything on one line. So again @Phil, thank you for the tip!

One thing I wasn't realizing is that my result from the http.get call which I was stuffing into the vm.search variable. Is actually an array. OBVIOUSLY you say, but it didn't dawn on me to only grab the first item from that array and stuff that in my variable named vm.search instead I was doing this:

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

When in fact I should have been doing this:

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

Now to look at the difference let's save out the result that we get from

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

using each method, first without targeting the first array element, we get:

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

Now if we extract the result using the latter method, going straight for the first element result[0] we get the results as an object, not an object contained within an array of only one item.

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

I know this seems tedious to explain all of this, but for someone like me who overlooked it, this is the difference between your model binding or not binding to the input values for each text field and even though it's very simple it's very possible that other noobs like myself would overlook this. I'm sure someone could better explain exactly what the difference is between the two.

Feel free ANYONE to edit my answer and better explain, especially if it takes less lines of code to do so!

Answer 2

The way controller and view talk to each other is through $scope. In your case the controller's vm variable is local to controller and is not available to view as you are declaring it as var vm .

When you access vm in view, it actually creates a new variable vm and put it on scope.

To correct it you need to pass $scope as controller dependency and use $scope.vm in your controller. Your controller should look like:

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

With these your view and controller should now refer to same 'vm' variable available in $scope.

Please note that you need not to explicitly use $scope.vm in your view as 'vm' is implicitly refers to $scope.vm in view.