从Javascript数组的内容创建HTML和AngularJS中的动态表

Question

我需要帮助使用HTML和AngularJS以循环赛的形式创建动态表格。将给出一个字符串数组，然后根据列表中有多少名称创建表，这样表的一部分将动态生成，表的一部分将始终相同。这是我传递一个包含8个名称的数组时生成的表的示例。生成表时，只有列A，B和C应该包含任何信息，但为了简单起见，我将所有内容都保留为空白。其余的框应该都是文本输入字段。

到目前为止，我所做的大部分表格都非常简单，我在这里有点不太深入，任何帮助都会非常感激。

Answer 1

假设你总是拥有一支完整的8支球队，那么你就可以开始了

<table>
  <tr>
    <th>club</th>
    <th>team</th>
    <th>#</th>
    <th ng-repeat="item in items">{{$index+1}}</th>
    <th>V</th>
    <th>TS</th>
  </tr>
  <tr ng-repeat="item in items">
    <td>{{item.club}}</td>
    <td>{{item.team}}</td>
    <td>{{item.rank}}</td>
    <td ng-repeat="item in items" ng-class="{black:$index==$parent.$index}"></td>
    <td><input ng-model="item.v"></td>
    <td><input ng-model="item.ts"></td>
  </tr>
</table>

的 DEMO

Answer 2

这是使用嵌套 var gulp = require('gulp'); var cssnano = require('gulp-cssnano'); var plumber = require('gulp-plumber'); var postcss = require('gulp-postcss'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify'); var livereload = require('gulp-livereload'); var autoprefixer = require('autoprefixer'); var ap_options = { browsers: [ 'last 4 Chrome versions', 'last 4 Firefox versions', 'last 4 Edge versions', 'last 2 Safari versions', 'ie >= 10', '> 1.49%', 'not ie <= 9' ], }; gulp.task('postcss', function() { return gulp.src('scss/*.scss') .pipe(plumber()) // Deal with errors. .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap. .pipe(sass({ // Compile Sass using LibSass. errLogToConsole: true, outputStyle: 'expanded' // Options: nested, expanded, compact, compressed })) .pipe(postcss([ // Parse with PostCSS plugins. autoprefixer(ap_options), ])) .pipe(sourcemaps.write('../maps')) // Create sourcemap. .pipe(gulp.dest('./css/')) // Create style.css. .pipe(livereload()); }); gulp.task('cssnano', ['postcss'], function() { return gulp.src('scss/*.scss') .pipe(plumber()) // Deal with errors. .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap. .pipe(sass({ // Compile Sass using LibSass. errLogToConsole: true, outputStyle: 'compressed' // Options: nested, expanded, compact, compressed })) .pipe(postcss([ // Parse with PostCSS plugins. autoprefixer(ap_options), ])) .pipe(cssnano({ // Minify CSS safe: true // Use safe optimizations })) .pipe(rename({ suffix: '.min' })) // Append our suffix to the name .pipe(sourcemaps.write('../maps')) // Create sourcemap. .pipe(gulp.dest('./css/')) // Create style.min.css. .pipe(livereload()); }); 元素的一个非常好的例子。

请参阅此plunker了解正常工作的演示文稿。

检测何时黑盒子的主要技巧是在外ng-repeat上使用ng-init="$rowIndex=$index"（我们为每个条目生成一行）。这允许内部ng-repeat（我们为每个条目生成一列）具有ng-repeat