Question

我想在角度JS中制作一个瓷砖盒，这样我就可以显示来自JSON的电话号码和名称。下一个磁贴应该用于添加新的电话号码。一旦我们添加了一些东西，它就应该彼此相邻显示。

任何身体都能帮忙吗？

Answer 1

你可以这样做，

<强>样本

var app = angular.module('app', ["ngMaterial"]);
app.controller('myCtrl', function($scope) {

  $scope.existingConnections = [{
    "name": "Nancy",
    "PhoneNo": "111"
  }, {
    "name": "Philip",
    "PhoneNo": "222"
  }, {
    "name": "William",
    "PhoneNo": "333"
  }, {
    "name": "Matthew",
    "PhoneNo": "444"
  }];
  
  $scope.submit = function(){
    $scope.existingConnections.push({name:$scope.Name,PhoneNo:$scope.PhoneNo});
  }

});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="myCtrl">
  <div flex layout="row">
    <div layout="column" class="p10" flex="50">
      <md-input-container>
        <label>Name</label>
        <input class="form-control" flex ng-model="Name" />
      </md-input-container>
    </div>
    <div layout="column" class="p10" flex="50">
      <md-input-container>
        <label>Phone Number</label>
        <input class="form-control" flex ng-model="PhoneNo" />
      </md-input-container>
    </div>
  </div>
  <div flex layout="row" layout-align="center center">
    <md-button type="button" class="p10" ng-click="submit()">
      Add
    </md-button>
  </div>
  <div layout="row" layout-wrap flex>
    <md-card flex="30" ng-repeat="connection in existingConnections">
      <md-card-title>
        <md-card-title-text layout="column" flex>
          <div layout="row" flex>
            <div><b> Name: </b></div>
            <div> {{connection.name}} </div>
          </div>
          <div layout="row" flex>
            <div><b> Phone: </b></div>
            <div> {{connection.PhoneNo}} </div>
          </div>

        </md-card-title-text>
      </md-card-title>
    </md-card>
  </div>
</body>

</html>

angularJS中的网格列表

1 个答案: