Angular ng-model on input not binding within ng-repeat

Question

I'm trying to get the input entry {{post.title}} to post upon submit, but only {{post.upvotes}} is posting. Can anyone see what I might not be seeing in my code?

The result when I submit is - upvotes: 0

When I change {{post.title}} to {{title}}, it posts fine, but I can't figure out why it won't bind to ng-model="post".

---
name: home
url: /
---
<br>
<div class="grid-container">
    <div class="grid-block">
      <div class="grid-block">
        <div id="chatBlock" class="small-12 medium-8 grid-content medium-order-1">
            <div ng-repeat="post in posts | orderBy: '-upvotes'">
              {{post.title}} - upvotes: {{post.upvotes}}
            </div>
            <br>
            <form ng-submit="addPost()">
              <input type="text" ng-model="title"></input>
              <button type="submit">Post</button>
            </form>
        </div>
        <div id="contacts" class="small-12 medium-4 grid-content medium-order-2">
            <div>{{test}}</div>
        </div>
     </div>
   </div>
</div>

app.js

(function() {
  'use strict';

  angular.module('chatter', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    .config(config)
    .run(run)
    .controller('MainCtrl', [
      '$scope', 
      function($scope){
        $scope.test = 'Contacts';
        $scope.posts = [
        {title: 'test post', upvotes: 5}
        ];
        $scope.addPost = function(){   
          $scope.posts.push({title: $scope.title, upvotes: 0});
          $scope.title = '';
        };
}]);

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

$scope.posts.push({title: $scope.title, upvotes: 0}); What is $scope.title? — freethinker
– freethinker, Commented May 1, 2015 at 18:44
Tried here and seemed to be working fine - jsfiddle.net/HB7LU/13396 — Omri Aharon
– Omri Aharon, Commented May 1, 2015 at 19:32
@OlegYudovich, your fiddle defnitely works, but I couldn't reconcile it with my current code. — Todd Williams
– Todd Williams, Commented May 1, 2015 at 20:25

Pankaj Parkar · Accepted Answer · 2015-05-01 19:35:43Z

1

Whenever you pass post.title at that time you are forcefully binding $scope.title of which will never give value. I believe you should do use post.title & post.upvotes & while calling addPost you should pass post object so that it would be easier to push data in posts array

        <form ng-submit="addPost(post)">
          <input type="text" ng-model="post.title"></input>
          <button type="submit">Post</button>
        </form>

Controller

    $scope.addPost = function(post){   
      $scope.posts.push({title: post.title, upvotes: post.upvotes});
      //$scope.title = '';
    };

answered May 1, 2015 at 19:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Todd Williams Over a year ago

This worked great! That's definitely a better way to do it. I would upvote your answer but my rep isn't high enough yet. Do you mind upvoting my question so that I can upvote great answers like yours?

Pankaj Parkar Over a year ago

@Todd Williams you can do upvote now.Glad to help you.. Thanks :)

Todd Williams Over a year ago

Ah, my rep is high enough now, actually.

Todd Williams Over a year ago

Panka, $scope.post.title = ' '; doesn't clear the input field upon submission. Am I referencing that correctly?

Pankaj Parkar Over a year ago

@you if you want to clear array then use post.title='', because we have not added that field in scope at all

floribon · Accepted Answer · 2015-05-01 19:32:38Z

0

You can try two things:

Initialize $scope.title in your controller, for instance
```
$scope.title = '';
$scope.test  = 'Contacts';
...
```

Pass title as a parameter to addPost (and then use the parameter):

<form ng-submit="addPost(title)">
  <input type="text" ng-model="title"></input>
  <button type="submit">Post</button>
</form>

Don't use title directly but create an object such as $scope.model.title. It is more reliable to use object property rather than directly raw types.

answered May 1, 2015 at 19:32

floribon

19.2k5 gold badges56 silver badges68 bronze badges

1 Comment

Todd Williams Over a year ago

Thanks for the response. I tried this but it didn't appear to work.

Collectives™ on Stack Overflow

Angular ng-model on input not binding within ng-repeat

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related