Question

我正在尝试将弹性变体选择（使用按钮）更改为selecet选项，

但我使用angular指令来改变所选值（我尝试过ng-change，ng-selected），我认为我在指令属性中的错误，

这是我错误的HTML代码：

<select class="form-control select-styled"ng-change="selectValue(item.value)" ng-model="item.value">
<option ng-repeat="item in option.values">{{item.value.presentation}}</option></select>

我正在尝试像这样使用ng-click

<select class="form-control select-styled">
<option ng-repeat="item in option.values" ng-click="selectValue(item.value)">{{item.value.presentation}}</option>

但它只适用于Firefox，而不适用于safari，chrome。

这是variantSelection.coffe代码

'use strict'

Sprangular.directive 'variantSelection', ->
  restrict: 'E'
  templateUrl: 'directives/variant_selection.html'
  scope:
    product: '='
    variant: '='
    class: '='
    change: '&'
  controller: ($scope) ->
    $scope.values = {}

$scope.$watch 'variant', (newVariant, oldVariant)->
  $scope.change({oldVariant: oldVariant, newVariant: newVariant}) if newVariant != oldVariant

$scope.isValueSelected = (value) ->
  $scope.values[value.option_type_id]?.id == value.id

$scope.isValueAvailable = (value) ->
  $scope.product.availableValues(_.values($scope.values))

$scope.selectValue = (value) ->
  $scope.values[value.option_type_id] = value
  $scope.variant = $scope.product.variantForValues(_.values($scope.values))

  link: (scope, element, attrs) ->
    scope.values = {}

if scope.variant
  for value in scope.variant.option_values
    scope.values[value.option_type_id] = value

Answer 1

在angular document中，您可以看到使用ngRepeat生成选择选项

部分中的示例

<强> HTML：

    <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" ng-change="selectValue(data.repeatSelect)" id="repeatSelect" ng-model="data.repeatSelect">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>

<强> JS：

    angular.module('ngrepeatSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    repeatSelect: null,
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
   };
}]);

// Code goes here

angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
      repeatSelect: null,
      availableOptions: [{
        id: '1',
        name: 'Option A'
      }, {
        id: '2',
        name: 'Option B'
      }, {
        id: '3',
        name: 'Option C'
      }],
    };

    $scope.selectValue = function(value) {
      console.log(value);
      alert(value);
    };
  }]);

<!DOCTYPE html>
<html ng-app="ngrepeatSelect">

<head>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="ExampleController">
    <form name="myForm">
      <label for="repeatSelect"> Repeat select: </label>
      <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect" ng-change="selectValue(data.repeatSelect)">
        <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
      </select>
    </form>
    <hr />
    <tt>repeatSelect = {{data.repeatSelect}}</tt>
    <br />
  </div>
</body>
</html>

这里是link，他们可以尝试解决这个问题。感谢。

此代码仅适用于firefox和IE

<option ng-click="this.$parent.selectValue(data.repeatSelect)" ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>

Answer 2

（将变体选择变为下拉列表时出现问题）使用ng-model和ng-change ... 问题是json不是一个对象

喜欢这段代码：

<select class="form-control select-styled" ng-model="item" ng-change="selectValue(item)">
<option ng-repeat="item in option.values" value="{{ item.value }}">{{item.value.presentation}}</option></select>

并编辑variantSelection.coffee

$scope.selectValue = (value) ->
  obj = JSON.parse(value) //add this one into selectValue function
  $scope.values[obj.option_type_id] = obj
  $scope.variant = $scope.product.variantForValues(_.values($scope.values))

和所选的选项将适用于每个浏览器..

希望这对我有同样问题的其他人有用..

抱歉#RIPenglish

Answer 3

试试这个

<select class="form-control select-styled">
<option ng-repeat="item in option.values" ng-click="selectValue(item.value)">{{item.value.presentation}}</option>

ngRepeat是一个指令所以它有自己的$得分。

下拉变量中的sprangular ng-change属性

3 个答案: