角度单选按钮范围及其值

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>

（此代码随后在我的视图中复制为“金属克拉”）

然后在我的控制器中：

$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。

来自角度文档：

请注意，此指令不应与 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。

干杯！