结果：

Question

我希望通过将电影添加到数组中来显示电影列表并添加新电影。

html文件：

<!-- FOREACH the movies -->
<div ng-controller="homeController" ng-repeat="movie in movies | orderBy : order">
    <div class="movie-wrapper">
        <h1>{{movie.name}}</h1>
        <p>IMDB: <a href="{{movie.imdb_url}}" target="_blank">IMDB</a></p>
    </div>
</div>

<!-- ADD a new movie to the array -->
<div ng-controller="homeController">

   <h3>Add new movie:</h3>
   <form name="movieForm" ng-submit="addMovie(movieInfo)">
      <div class="form-group new-movie">
           <label for="Title">Title:</label>
           <input type="text" class="form-control" name="title" ng-model="movieInfo.title">
       </div>
       <div class="form-group new-movie">
           <label for="IMDB">IMDB:</label>
           <input type="text" class="form-control" name="imdb" ng-model="movieInfo.imdb">
       </div>

       <button type="submit" class="btn btn-primary">Add movie</button>
   </form>
</div>

javascript文件：

var app = angular.module('movie-app', ["ngRoute"]);
app.controller("homeController", function($scope) {
   $scope.movies = getMovies();

   // Method to add a new movie
   $scope.addMovie = function(movieInfo) {
      $scope.movies.push({
         name : movieInfo.title,
         imdb_url: movieInfo.imdb
       });

      console.log("Movie added");
   }
});

function getMovies() {
   return [{
      name: 'Inception',
      imdb_url: 'http://www.imdb.com/title/tt1375666/'
   }];
}

按下提交按钮后，在控制台中我没有收到任何错误消息，但不知何故UI没有刷新。

我认为当我推送新条目时，控制器不会以相同的数组或dom元素获取引用/绑定。

Answer 1

首先，我很确定你的控制台应该有错误

你犯了3个错误：

<强> 1。您的apply plugin: 'com.android.application' apply plugin: 'com.neenbedankt.android-apt' apply plugin: 'me.tatarka.retrolambda' android { compileSdkVersion 23 buildToolsVersion "24.0.1" defaultConfig { applicationId "psystem.co.reaya" minSdkVersion 15 targetSdkVersion 23 versionCode 1 versionName "1.0" multiDexEnabled true jackOptions { enabled true } } dexOptions { preDexLibraries false javaMaxHeapSize "4g" incremental true } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.google.code.gson:gson:2.4' retrolambdaConfig 'net.orfjackal.retrolambda:retrolambda:+' compile 'com.android.support:multidex:1.0.1' } my tries to fix the issue remove jack options , I got this error `org.gradle.execution.TaskSelectionException: Task ',' not found in root project 'Reaya'.`函数中存在错误（缺少大括号getMovies()）

{}

为什么花括号很重要？

名称和 imdb_url 是属性对象。在JavaScript中，对象前后必须有大括号。但是你的函数function getMovies() { return [{ name: 'Inception', imdb_url: 'http://www.imdb.com/title/tt1375666/' }]; }会返回1个元素的数组，所以你必须用括号getMovies

包围你的对象

<强> 2。调用console.log（缺少引用[]）

时也会出错

第3。最后一个：您必须删除括号console.log("Movie added);（})之后的行

）

结果：

＆＃13;

console.log

＆＃13;

angular.module('movieApp', [])
  .controller("homeController", function($scope) {
    $scope.movies = getMovies();

    // Method to add a new movie
    $scope.addMovie = function(movieInfo) {
      $scope.movies.push({
        name: movieInfo.title,
        imdb_url: movieInfo.imdb
      });

      console.log("Movie added");
    };
  });

function getMovies() {
  return [{
    name: 'Inception',
    imdb_url: 'http://www.imdb.com/title/tt1375666/'
  }];
}

＆＃13;

Angularjs数组推送UI不会被刷新

1 个答案:

结果：