Here is example you can use as stating point.
http://www.byteblocks.com/Post/Creating-angularJS-grid-for-MVC-application
You will notice that in controller, there is getauctionitems function that
makes async request using $http service to get auction items. You can build
something along the same line to get your cell phones data list from server.
On Saturday, June 21, 2014 4:16:39 PM UTC-4, kfirbene wrote:
>
> I wrote the following html:
>
> <!DOCTYPE html>
> <html ng-app>
> <head>
> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"
> charset="utf-8"/>
> <style type="text/css">
> html { height: 100% }
> body { height: 100%; margin: 0; padding: 0 }
> #map-canvas { height: 100%; width: 50%; float: right }
> #CellCouponsTable {height: 100%; width: 50%; float: left;
> background-color: #a5beda}
> </style>
> <script type="text/javascript"
> src="https://maps.googleapis.com/maps/api/js>
> </script>
> <script type="text/javascript"
> src="lib/AngularJS/angular_1.2.16.min.js"></script>
> <script type="text/javascript" src="CouponsController.js"></script>
> <script type="text/javascript" src="GoogleMap.js"></script>
>
>
> </head>
> <body>
> <div id="CellCouponsTable" ng-controller="CellCouponController">
> <table id="CellTable" border=1>
> <tr>
> <p> Cell Phones Coupons</p>
> <th>Model</th>
> <th>Manufacturer</th>
> <th>Cell Image</th>
> <th>Manufacturer Url</th>
> <th>Local Vendor</th>
> <th>Local Vendor Address</th>
> </tr>
> <tr ng-repeat="coupon in CellCoupons">
> <td>{{coupon.model}}</td>
> <td>{{coupon.manufacturer}}</td>
> <td>
> <img src="{{coupon.CellImage}}" alt="{{coupon.coupon}}"
> width="50px;" height="50px;" width="60px">
> </td>
> <td>
> <a href="{{coupon.manufacturerUrl}}">
> {{coupon.manufacturer}} URL </a>
> </td>
> <td>{{coupon.localVendor}}</td>
> <td>{{coupon.localVendorAddress}}</td>
> </tr>
> </table>
> </div>
> <div id="map-canvas"/>
> </body>
> </html>
>
>
> I am trying to write an ajax request to get my json data and use it in the
> ng-repeat API. I need the basic module and controller to get the data to
> the correct tags.
> My json:
>
> {
> "CellPhones":[
> {
> "model":"iphone 4s",
> "manufacturer": "Apple",
> "CellImage": "Pics/iphone_4s.jpg",
> "manufacturerUrl": "www.apple.com",
> "localVendor": "Local Apple Store",
> "localVendorAddress": "הסדנאות 8 הרצליה"
>
> },
> {
> "model":"iphone 5",
> "manufacturer": "Apple",
> "CellImage": "Pics/iphone_5.jpg",
> "manufacturerUrl": "www.apple.com",
> "localVendor": "Local Apple Store",
> "localVendorAddress": "הסדנאות 8 הרצליה"
>
> },
> {
> "model":"iphone 3gs",
> "manufacturer": "Apple",
> "CellImage": "Pics/iphone_3gs.jpg",
> "manufacturerUrl": "www.apple.com",
> "localVendor": "Local Apple Store",
> "localVendorAddress": "הסדנאות 8 הרצליה"
>
> },
> {
> "model":"HTC One",
> "manufacturer": "HTC",
> "CellImage": "Pics/HTC_one.jpg",
> "manufacturerUrl": "http://www.htc.com/us/";,
> "localVendor": "Local HTC Store",
> "localVendorAddress": "מדינת היהודים 89, הרצליה"
>
> },
> {
> "model":"Google Nexus 5",
> "manufacturer": "Google",
> "CellImage": "Pics/Nexus_5",
> "manufacturerUrl": "http://www.google.com/intl/all/nexus/5/";,
> "localVendor": "Local Google Store",
> "localVendorAddress": "יגאל אלון 98 תל אביב"
>
>
> }
> ],
> "Tablets":[
> {
> "model":"Google Nexus 7",
> "manufacturer": "Google",
> "manufacturerUrl": "http://www.google.com/intl/all/nexus/7/";,
> "localVendor": "Local Google Store",
> "localVendorAddress": "יגאל אלון 98 תל אביב"
>
> },
> {
> "model":"Google Nexus 10",
> "manufacturer": "Google",
> "manufacturerUrl": "http://www.google.com/intl/all/nexus/10/";,
> "localVendor": "Local Google Store",
> "localVendorAddress": "יגאל אלון 98 תל אביב"
>
> },
> {
> "model":"ipad",
> "manufacturer": "Apple",
> "manufacturerUrl": "http://www.apple.com/ipad/";,
> "localVendor": "Local Apple Store",
> "localVendorAddress": "הסדנאות 8 הרצליה"
>
> },
> {
> "model":"samsung galaxy tab 3",
> "manufacturer": "Samsung",
> "manufacturerUrl": "http://www.samsung.com";,
> "localVendor": "Local Samsung Store",
> "localVendorAddress": "בן ציון גליס 48, פתח תקווה"
>
> },
> {
> "model":"Sony Xperia Z",
> "manufacturer": "Sony",
> "manufacturerUrl": "http://www.sony.com";,
> "localVendor": "Local Sony Store",
> "localVendorAddress": "ספיר 7 הרצליה"
> }
> ],
> "Laptops":[
> {
> "model":"Sony Vaio yb1s1 ",
> "manufacturer": "Sony",
> "manufacturerUrl": "http://www.sony.com";,
> "localVendor": "Local Sony Store",
> "localVendorAddress": "ספיר 7 הרצליה"
> },
> {
> "model":"DELL INSPIRON 15R",
> "manufacturer": "Dell",
> "manufacturerUrl": "http://www.dell.com";,
> "localVendor": "Local Dell Store",
> "localVendorAddress": "רוזנסקי 14 ראשון לציון"
> },
> {
> "model":"ASUS Zenbook UX301LA-XH72T",
> "manufacturer": "Asus",
> "manufacturerUrl": "http://www.asus.com";,
> "localVendor": "Local Asus Store",
> "localVendorAddress": "שדרות ירושלים 40 רמת גן"
> },
> {
> "model":"hp elitebook 8460p",
> "manufacturer": "HP",
> "manufacturerUrl": "
> http://www.hp.com/country/us/en/uc/welcome.html";,
> "localVendor": "Local HP Store",
> "localVendorAddress": "הבונים 3 רמת גן"
> }
> ]
> }
>
> Currently I am working on getting the Cellphones data in, after that I'll
> do the rest. I was only able to get the data in by using:
>
> function CellCouponController($scope)
> {
> $scope.CellCoupons = [
> {
> "model":"iphone 4s",
> "manufacturer": "Apple",
> "CellImage": "Pics/iphone_4s.jpg",
> "manufacturerUrl": "http://www.apple.com";,
> "localVendor": "Local Apple Store",
> "localVendorAddress": "הסדנאות 8 הרצליה"
> },
> {
> "model":"iphone 5",
> "manufacturer": "Apple",
> "CellImage": "Pics/iphone_5.jpg",
> "manufacturerUrl": "http://www.apple.com";,
> "localVendor": "Local Apple Store",
> "localVendorAddress": "הסדנאות 8 הרצליה"
> }
> }
>
> And this is not ajax.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
