求助：如何使用Angular.js展示JSON中的商品数据

嘿，刚上手Angular.js遇到数据展示的问题太正常了！我给你一套简单易懂的实现步骤，包含JS控制器和HTML模板代码，照着做就能搞定商品列表的展示啦～

第一步：准备商品JSON数据 #

首先咱们得有一份格式规范的商品JSON数据，比如你可以创建一个products.json文件，内容大概是这样：

[
  {
    "name": "复古帆布包",
    "image": "./images/bag.jpg",
    "price": 99.9
  },
  {
    "name": "简约马克杯",
    "image": "./images/mug.jpg",
    "price": 39.9
  },
  {
    "name": "纯棉T恤",
    "image": "./images/tshirt.jpg",
    "price": 59.9
  }
]

如果暂时不想搞本地文件，也可以在控制器里直接模拟这份数据，先跑通功能再说。

第二步：编写Angular.js控制器代码 #

接下来创建你的JS文件（比如app.js），这里要定义Angular模块和控制器，负责加载JSON数据并传递给视图：

// 定义Angular模块
var app = angular.module('productApp', []);

// 创建控制器
app.controller('ProductController', function($scope, $http) {
  // 方法1：加载本地JSON文件
  $http.get('products.json')
    .then(function(response) {
      // 把获取到的商品数据绑定到$scope
      $scope.products = response.data;
    })
    .catch(function(error) {
      console.error('加载数据失败：', error);
      // 如果加载失败，可以先模拟数据应急
      $scope.products = [
        {name: "应急商品1", image: "./images/default.jpg", price: 19.9},
        {name: "应急商品2", image: "./images/default.jpg", price: 29.9}
      ];
    });

  // 方法2：直接模拟数据（适合快速测试）
  // $scope.products = [
  //   {name: "复古帆布包", image: "./images/bag.jpg", price: 99.9},
  //   {name: "简约马克杯", image: "./images/mug.jpg", price: 39.9}
  // ];
});

这里要注意：

• 用$http服务来请求JSON文件，成功后把数据存到$scope.products里，这样视图就能访问到了
• 加了错误捕获，避免加载失败时页面一片空白，新手调试起来更方便

第三步：编写HTML展示模板 #

最后写你的HTML页面，用Angular的指令把数据渲染出来：

<!DOCTYPE html>
<html ng-app="productApp">
<head>
  <title>商品列表</title>
  <!-- 引入Angular.js库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- 引入你的控制器JS文件 -->
  <script src="app.js"></script>
  <style>
    /* 简单加个样式让列表好看点 */
    .product-item {
      display: inline-block;
      margin: 10px;
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 5px;
      width: 200px;
      text-align: center;
    }
    .product-item img {
      width: 150px;
      height: 150px;
      object-fit: cover;
    }
  </style>
</head>
<body ng-controller="ProductController">
  <h1>我的商品列表</h1>
  <!-- 用ng-repeat循环渲染每个商品 -->
  <div class="product-item" ng-repeat="product in products">
    <h3>{{ product.name }}</h3>
    <!-- 图片要用ng-src，避免Angular解析前出现无效的src属性 -->
    <img ng-src="{{ product.image }}" alt="{{ product.name }}">
    <p>价格：¥{{ product.price }}</p>
  </div>

  <!-- 如果没有数据时显示提示 -->
  <div ng-if="!products">加载商品数据中...</div>
</body>
</html>

关键指令说明：

• ng-app="productApp"：告诉Angular这是咱们的应用根节点
• ng-controller="ProductController"：绑定控制器，让这个区域能访问控制器里的$scope数据
• ng-repeat="product in products"：循环遍历products数组，每个元素赋值给product，然后渲染对应的模板
• ng-src：专门用来处理Angular表达式的图片路径，防止页面加载时浏览器解析{{}}导致的404错误

注意事项 #

• 确保Angular.js库的版本正确（这里用的是1.8.2，是AngularJS的稳定版本）
• 如果是本地打开HTML文件，可能会遇到跨域问题（浏览器限制本地文件的AJAX请求），这时候可以用简单的本地服务器（比如Python的python -m http.server）来运行页面
• 图片路径要和你的实际文件位置对应，不然图片显示不出来

这样一套流程走下来，你就能看到所有商品的名称、图片和价格啦～有问题随时问！

内容的提问来源于stack exchange，提问作者Rodrigo Shiomi Shirota