CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ngmodel
Todd Williams
Todd Williams

Reputation: 267

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

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

})();

Upvotes: 1

Views: 987

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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 = '';
    };

Upvotes: 1

floribon
floribon

Reputation: 19193

You can try two things:

  1. Initialize $scope.title in your controller, for instance

    $scope.title = '';
$scope.test  = 'Contacts';
...

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

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

Upvotes: 0

Related Questions