Question

目前在我的网站上有这个，但它无法正常工作：

这个想法是当您选择按钮（单选按钮）时，按钮上方的标题会更改为相应的值。例如，它应该是这样的：

到目前为止，这是我的代码：

<fieldset ng-repeat="modifier in modifiers" ng-if="modifier.type.value === 'Single' && modifier.title === 'Metal Colour'">
    <div class="row">
        <div class="col-md-12 main-label">
            <span>{{ modifier.title }}:</span>
            <span class="result">{{ title }}</span> 
            <span class="price">({{ price }})</span>
        </div>
        <div class="col-md-12">
            <ul>
                <li ng-repeat="variation in modifier.variations" >
                    <input type="radio" id="{{ variation.id }}" value="{{ variation.id }}" name="{{ modifier.id }}" ng-model="metalColour" ng-mod="{{ modifier.id }}" ng-title="{{ variation.title }}" ng-price="{{ variation.mod_price }}" class="singles" ng-checked="$index === 0" ng-click="isSelected($event)" ng-init="triggerClick()" />
                    <label class="radio colour" ng-class="variation.title === 'Yellow Gold' || variation.title === 'Geel Goud' ? 'yellow' : 'white' " for="{{ variation.id }}"> <span class="sr-only">{{ variation.title }}</span>
                </li>
            </ul>
        </div>
     </div>
</fieldset>

（此代码随后在我的视图中被复制为＆＃39; METAL CARAT＆＃39;）

然后在我的控制器中：

$scope.isSelected = function (obj) {
  $scope.$index = 1;

  var getObj = obj.target,
      getTitle = $(getObj).attr('ng-title'),
      getPrice = $(getObj).attr('ng-price');

  $scope.title = getTitle;
  $scope.price = getPrice;

  //console.log($(getObj).attr('ng-title'))
}

$scope.triggerClick = function () {
  $timeout(function() {
    $(':checked').trigger('click');
  }, 100);
}

Answer 1

您正在对输入按钮进行不必要的工作，首先，您不应该对同一元素使用ng-model和ng-checked。

来自angular docs：

请注意，此指令不应与ngModel一起使用，因为这可能会导致意外行为。

此外，几乎从不使用ng-init：

可以滥用此指令将不必要的逻辑量添加到模板中。 ngInit只有少数适当的用途，例如用于别名ngRepeat的特殊属性，如下面的演示所示;并通过服务器端脚本注入数据。除了这几种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。

据说这就是为什么我们不要简化一些事情：

<fieldset ng-app='app' ng-controller='ctrl'>
    <div class="row">
        <div class="col-md-12 main-label">
            <span class="result">{{selected.title}}</span> 
            <span class="price">({{ selected.price }})</span>
        </div>
        <div class="col-md-12">
            <ul>
                  <input type="radio" name='radio' ng-model='selected' ng-value='{title:"18ct",price:"0"}' />
                  <input type="radio" name='radio' ng-model='selected' ng-value='{title:"22ct",price:"+20"}' />
            </ul>
        </div>
    </div>
</fieldset>

在你的控制器中：

angular.module("app", [])
    .controller("ctrl", ctrl);

ctrl.$inject = ['$scope'];
function ctrl($scope) {
    $scope.selected = {
        title: "Select",
        price: 0
    }
}

Codepen：http://codepen.io/anon/pen/PNNQBp

如果你需要任意id供以后使用，只需将它作为对象属性添加到ng-value中。

我希望你能够自己找出ng-classes。

干杯！

角度单选按钮范围及其值

1 个答案: