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中的網格平鋪列表

回答

相關問題