Question

我要做的是在选择产品时，将不同类型的产品带入浏览器。这就是我得到的：

的script.js

function showCtrl($scope,  $http) {
$scope.products = [
 {
    "category":"Pens",
    "label":"p1",
    "images":"d-u-b/pens.png"
},
{
    "category":"Cozies",
    "label":"p2",
    "images":"d-u-b/cozie.png"
}
];
$scope.prod = {"name": "Cozies"};
$scope.typSelect = 'plain';
$http.get("products/"+$scope.prod.name+".json").success(function(data){
    $scope.type = data;

});
}

customo.php（被调用的代码段）

<div class="pro" ng-repeat="product in products">
 <label for="{{product.label}}" class="p">
  <input id="{{product.label}}" type="radio" ng-model="prod.name" name="name" value="{{product.category}}"/>
  <h3>{{product.category}}</h3><img ng-src="{{product.images}}" alt="{{product.category}}"/>
 </label>
</div>

我的问题是prod.name在js中没有改变而没有调用正确的json文件。我在html中显示了prod.name，当我点击单选按钮时它会正确更改，但类型不会根据我选择的产品而改变。

任何人都可以看到我做错了什么以及如何解决它？

Answer 1

那是因为你的javascript代码没有注意那个变量的变化。要让控制器观察prod.name，您需要使用$scope $scope.$watch('prod.name', function () { $http.get("products/"+$scope.prod.name+".json").success(function(data){ $scope.type = data; }); });变量的方法。

{{1}}

Answer 2

不确定，但我认为您的$ http代码不正确。我稍微更改了您的代码。如果它符合您的期望，请告诉我。基本上，我在单选按钮html上添加了一个ng-click指令。单击时，它会调用传入产品的作用域上的函数getData。从那里，我提取类别并在控制台中显示。您可以使用它来获取文件名并从json文件中获取数据。

的script.js：

angular.module('app', [])
.controller('showCtrl', showCtrl);


function showCtrl($scope,  $http) {
$scope.products = [
 {
    "category":"Pens",
    "label":"p1",
    "images":"d-u-b/pens.png"
  },
  {
      "category":"Cozies",
      "label":"p2",
      "images":"d-u-b/cozie.png"
  }
  ];
//$scope.prod = {"name": "Cozies"};
$scope.typSelect = 'plain';
$scope.getData = function(prod) {
  // $http.get($scope.prod.name + ".json").success(function(data){
  //   $scope.type = data;
    console.log('getting data from ' + prod.category);
};
}

的index.html：

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-controller="showCtrl">
    <script src= "angular.js"></script>

    <script src= "script.js"></script>

    <div class="pro" ng-repeat="product in products">
     <label for="{{product.label}}" class="p">
      <input id="{{product.label}}" type="radio" ng-model="prod.name" name="name" value="{{product.category}}" ng-click="getData(product)"/>
      <h3>{{product.category}}</h3>
      <!-- <img ng-src="{{product.images}}" alt="{{product.category}}"/> -->

     </label>
</div>

{{prod.name}}
</body>
</html>

按下单选按钮时值不变 - AngularJS

2 个答案: