angularJS中的网格平铺列表

-2

我想在角JS中制作一个拼贴盒，以便我可以显示来自JSON的电话号码和姓名。下一个图块应该用于添加新的电话号码。只要我们添加了一些内容，它应该彼此相邻显示。angularJS中的网格平铺列表

身体能帮助吗？

2016-12-10 pourushsingh gaur

请加上你的努力 –

@pourushsingh你尝试过什么码参考？堆栈溢出不是一个免费的编码service.try搜索和研究，并尝试编写一些代码。如果你有麻烦，你可以回到这里，并提出一个适当的问题，提供[一个最小，完整和可验证的例子]（http://stackoverflow.com/help/mcve） –

@MD Ashik：是的，Ashik 。我试了一下代码，然后问了这个问题。我不知道发布代码，所以我问了一下。 –

你可以做到这一点，

DEMO

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="[email protected]" 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="[email protected]*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <script data-require="[email protected]" 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="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script> 
 
    <script data-require="[email protected]" 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>

来源

2016-12-10 03:21:46 Sajeetharan

谢谢Sajeetharan –

@pushushsinghgaur不客气，upvote如果它有帮助 – Sajeetharan

嗨...假设我有像名字，电话和类型的键。类型必须像移动，家庭，按时间顺序工作。我应该怎样只能按照这个特定的顺序来遵循这一点。我试过orderBy，但无法实现orderBy按升序排列的功能。 –

angularJS中的网格平铺列表

回答

相关问题