Angular 输入的 ng-model 在 ng-repeat 中没有绑定

Question

我试图在提交时将输入条目 {{post.title}} 设为 post，但只有 {{post.upvotes}} 正在 posting .谁能看到我在代码中可能看不到的内容？

我提交的结果是 - 赞成票：0

当我将 {{post.title}} 更改为 {{title}} 时，它 post 没问题，但我不明白为什么它不会绑定到 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);
  }

})();

Answer 1

您可以尝试两件事：

在你的控制器中初始化$scope.title，例如

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

将title作为参数传递给addPost（然后使用参数）：

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

不要直接使用title，而是创建一个对象，例如$scope.model.title。使用对象属性比直接使用原始类型更可靠。

Answer 2

每当你通过 post.title 时，你就被强制绑定了 $scope.title，它永远不会产生价值。我相信你应该使用 post.title & post.upvotes & 在调用 addPost 时你应该传递 post 对象，这样在 posts 数组中推送数据会更容易

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

控制器

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

Angular 输入的 ng-model 在 ng-repeat 中没有绑定

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

angularjs

angularjs-ng-repeat

angular-ngmodel