Question

我正在制作一个单选按钮列表，用户可以从预先填充的问题列表中进行选择，或者选择“其他”单选按钮，然后输入他们的特定问题。

我可以让预先填充的单选按钮列表工作并设置问题（输出范围变量确认了这一点），但引入“其他”功能让我感到困惑。当我选择其他时，它似乎没有绑定到范围变量。我注意到它在dom中缺少一个类=“ng-scope”，其他单选按钮似乎从ng-repeat中得到，但我不确定这是不是问题。

        <form>

          // This part loops through the list of problems and makess radio buttons
          <div ng-repeat="problem in selectedType['nature_of_problem']">
              <input type="radio" ng-model="$parent.natureOfProblem" ng-value="problem"/>
          </div>

          // Ideally this part is where the "other" radio is, it's still in the form
          <input type="radio" ng-model="natureOfProblem" ng-value="other" ng-checked="">

        </form>

Answer 1

工作JSFiddle：

http://jsfiddle.net/HB7LU/3794/

我看到了一些问题，其中包括：

为＆＃34;其他＆＃34;
使用原语代替点表示法（如果你希望你的视图可靠地写一个变量，它需要是something.yourVariable而不是普通的oldVariable）

希望这有帮助！

function MyCtrl($scope) {
    $scope.uiState = {};
    $scope.uiState.natureOfProblem = 1;
    $scope.selectedType = {};
    $scope.selectedType.nature_of_problem = [1,2,3];
}

<div ng-controller="MyCtrl">
    <p>Nature of problem is: {{uiState.natureOfProblem}}</p>
    <form>
        <div ng-repeat="problem in selectedType['nature_of_problem']">
            <input type="radio" ng-model="uiState.natureOfProblem" ng-value="problem"/><span ng-bind="problem"></span>
        </div>

        <input type="radio" ng-model="uiState.natureOfProblem" value="Other" /><span>Other</span>

    </form>
</div>

编辑回答OP的问题：

我倾向于习惯使用ng-bind - 在像Firefox这样的慢速浏览器中，它保持＆＃34; {{blah}}＆＃34;当一切都加载时，从屏幕上显示出来。较新版本的Angular也有用于此目的的ng-cloak，我应该习惯使用它。 :)（我还清楚地记得读过那些＆＃34; {{blah}}＆＃34;可能会在IE中引起问题，但我很可能会这样做。）

点符号的使用与Angular无法在全新对象上维护数据绑定的事实有关。尝试解释它而不使用＆＃34;范围＆＃34;等术语。和＆＃34;继承＆＃34;：如果通过更改yourObject.anAttribute来影响现有对象，则整个过程中始终存在总体对象，并且不会丢弃其绑定。但是如果你有等于8的blahVariable，并且你将blahVariable设置为等于7，那么你基本上就抛弃了旧的数据并完全创建了一个新的数据。这个新作品不会保持绑定，因此控制器永远不会从视图中获取值已更改的备忘录。

有时候我觉得这很有用，实际上 - 你可以在视图中简单地操作一个变量，以达到一些快速和肮脏的目的，而不需要控制器找到它。：）

角度单选按钮范围

1 个答案: