如何创建Bootstrap网格

时间:2016-11-05 13:30:39

标签: javascript angularjs json twitter-bootstrap

我想格式化我在Angular中读取的json文件的输出。我想使用引导网格,但我尝试过但没有成功。文件是:

的test.html

<html>
   <head>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-app="MyApp" ng-controller="TestCtrl">
        <ul>
            <div class="row">
                <div class="col-md-2">
                    <li ng-repeat-start="pat in patients">
                        <strong> {{pat.name}}</strong>
                    </li>
                </div>
                <div class="col-md-2">  
                    <li ng-repeat-end ng-repeat="diag in pat.diagnose">
                        {{diag.disease}}
                    </li>
                </div>
            </div>
        </ul>
</body>

test.js

 var App = angular.module('MyApp', []);

 App.controller('TestCtrl', function($scope, $http) {
     $http.get('test.json').success(function(data){
         $scope.patients = [];
         angular.forEach(data.patients, function(value, key){
           $scope.patients.push(value);
        });
   });
 });

test.json

{
     "patients": [
                {
                    "name": "Abcd", 
                    "diagnose":[    
                                {"disease":"Ddd"},
                                {"disease":"Rrrr"},
                                {"disease":"Aaaaa"}
                            ]
                },
                {
                    "name": "Efghij", 
                    "diagnose":[ 
                                {"disease":"Hhhhh"}
                            ]
                },
                {
                    "name": "Klmnop", 
                    "diagnose":[
                                {"disease":"Gggggg"}
                            ]
                },
                {
                    "name": "Qrst", 
                    "diagnose":[
                                {"disease":"Oooooo"},
                                {"disease":"Xxxxxx"}
                            ]
                }
            ]
  }

我想拥有每一行:名称(col 1),疾病(col2)。 (垂直列出的疾病)。 Coul,你帮我请求

4 个答案:

答案 0 :(得分:0)

你可以试试这个,

&#13;
&#13;
var App = angular.module('MyApp', []);

 App.controller('TestCtrl', function($scope) {
     $scope.patients = [
                {
                    "name": "Abcd", 
                    "diagnose":[    
                                {"disease":"Ddd"},
                                {"disease":"Rrrr"},
                                {"disease":"Aaaaa"}
                            ]
                },
                {
                    "name": "Efghij", 
                    "diagnose":[ 
                                {"disease":"Hhhhh"}
                            ]
                },
                {
                    "name": "Klmnop", 
                    "diagnose":[
                                {"disease":"Gggggg"}
                            ]
                },
                {
                    "name": "Qrst", 
                    "diagnose":[
                                {"disease":"Oooooo"},
                                {"disease":"Xxxxxx"}
                            ]
                }
            ];

 });

angular.bootstrap(document, ['MyApp']);
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="TestCtrl" class="container">
        <div class="row" ng-repeat="pat in patients">
                <div class="col-md-2">
                    <strong> {{pat.name}}</strong>
                </div>
                <div class="col-md-2"> 
                    <ul>
                      <li ng-repeat="diag in pat.diagnose">
                        {{diag.disease}}
                      </li>
                    </ul>
                    
                </div>
            </div>
</body>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个:

https://jsfiddle.net/RLQhh/6393/

import java.util.Scanner;
import java.lang.Math;

class Main {
    public static void main(String[] args) {

        Scanner scan = new Scanner(System.in);

        int[] all = new int[47];

        System.out.print(all.length);

        int b = 0;

        int c = 0;
        for (int count = 0; count < 47;) {

            int num1 = (int) (Math.random() * 5 + 1);

            int num2 = num1;

            while (num2 == num1) {
                num2 = (int) (Math.random() * 5 + 1);
            }

            int num3 = num2;

            while ((num3 == num1) || (num3 == num2)) {
                num3 = (int) (Math.random() * 5 + 1);

            }

            int num4 = num3;

            while ((num4 == num1) || (num4 == num2) || (num4 == num3)) {
                num4 = (int) (Math.random() * 5 + 1);
            }

            int num5 = num4;

            while ((num5 == num1) || (num5 == num2) || (num5 == num3) || (num5 == num4)) {
                num5 = (int) (Math.random() * 5 + 1);
            }

            int numbers1 = num1 + num2 - num3 * num4 / num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers1) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers1;
                    count++;
                }

            }
            int numbers2 = num1 + num2 - num3 / num4 * num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers2) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers2;
                    count++;
                }
            }
            int numbers3 = num1 + num2 / num3 - num4 * num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers3) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers3;
                    count++;
                }
            }
            int numbers4 = num1 + num2 / num3 * num4 - num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers4) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers4;
                    count++;
                }
            }

            int numbers5 = num1 + num2 * num3 / num4 - num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers5) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers5;
                    count++;
                }
            }
            int numbers6 = num1 + num2 * num3 - num4 / num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers6) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers6;
                    count++;
                }
            }
            int numbers7 = num1 - num2 + num3 / num4 * num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers7) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers7;
                    count++;
                }
            }

            int numbers8 = num1 - num2 + num3 * num4 / num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers8) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers8;
                    count++;
                }
            }

            int numbers9 = num1 - num2 / num3 + num4 * num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers9) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers9;
                    count++;
                }
            }
            int numbers10 = num1 - num2 / num3 * num4 + num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers10) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers10;
                    count++;
                }
            }
            int numbers11 = num1 - num2 * num3 / num4 + num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers11) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers11;
                    count++;
                }
            }
            int numbers12 = num1 - num2 * num3 + num4 / num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers12) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers12;
                    count++;
                }
            }

            int numbers13 = num1 / num2 * num3 - num4 + num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers13) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers13;
                    count++;
                }
            }
            int numbers14 = num1 / num2 * num3 + num4 - num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers14) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers14;
                    count++;
                }
            }
            int numbers15 = num1 / num2 + num3 * num4 - num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers15) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers15;
                    count++;
                }
            }
            int numbers16 = num1 / num2 + num3 - num4 * num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers16) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers16;
                    count++;
                }
            }
            int numbers17 = num1 / num2 - num3 * num4 + num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers17) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers17;
                    count++;
                }
            }
            int numbers18 = num1 / num2 - num3 + num4 * num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers18) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers18;
                    count++;
                }
            }
            int numbers19 = num1 * num2 / num3 - num4 + num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers19) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers19;
                    count++;
                }
            }
            int numbers20 = num1 * num2 / num3 + num4 - num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers20) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers20;
                    count++;
                }
            }
            int numbers21 = num1 * num2 + num3 - num4 / num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers21) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers21;
                    count++;
                }
            }

            int numbers22 = num1 * num2 + num3 / num4 - num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers22) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers22;
                    count++;
                }
            }

            int numbers23 = num1 * num2 - num3 / num4 + num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers23) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers23;
                    count++;
                }
            }
            int numbers24 = num1 * num2 - num3 + num4 / num5;

            for (int i = 0; i < all.length; i++)

            {
                if (all[i] == numbers24) {
                    b = 1;
                }

                if ((b != 1) && (i == (all.length - 1))) {
                    all[count] = numbers24;
                    count++;
                }
            }

        }

        for (c = 0; c < all.length; c++) {
            if (c > 0) {
                System.out.print(", ");
            }
            System.out.print(all[c]);

        }
        System.out.print(all.length);

    }

}

答案 2 :(得分:0)

我很不清楚。我想要创建网格的网格结构是:

Patient_1                    Disease_1_Patient_1
                             Disease_1_Patient_1
                             Disease_2_Patient_1
------------------------------------------------
Patient_2                    Disease_1_Patient_2
                             Disease_2_Patient_2
------------------------------------------------

等等。

答案 3 :(得分:0)

我希望它对其他人有用。最后,我得到了我想要的结果。我更改了HTML文件如下(我只显示正文部分):

<body ng-app="MyApp" ng-controller="TestCtrl">
    <div class="container" ng-repeat="pat in patients">
        <div class="row">
            <div class="col-md-2">{{pat.name}}</div>
            <div class="col-md-2"><ul><li ng-repeat="diag in pat.diagnose">{{diag.disease}}</li></ul></div>
        </div>
     </div>
 </body>

我通过首先创建一个这样的HTML表来达到这个结果:

    <table ng-repeat="artist in artists">
        <tr>
            <td>{{artist.name}}</td>
            <td ><ul><li ng-repeat="album in artist.albums">{{album.title}}</li></ul></td>
        </tr>
    </table>    

然后我换了:

               <table> 

              <div class="container">, 

               <tr> 

               <div class="row"> 

               <td> 

                <div class="col-xx-xx">