按下单选按钮时值不会更改-AngularJS

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变量的$ watch方法。

$scope.$watch('prod.name', function () {
  $http.get("products/"+$scope.prod.name+".json").success(function(data){
    $scope.type = data;
  });
});

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 个解决方案

解决方案1
0 已采纳 2014-05-29 19:40:02

解决方案2
0 2014-05-29 19:46:01

按下单选按钮时值不会更改-AngularJS

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-05-29 19:40:02

解决方案2 0 2014-05-29 19:46:01

解决方案1
0 已采纳 2014-05-29 19:40:02

解决方案2
0 2014-05-29 19:46:01