角度单选按钮范围

Question

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

我可以让预先填充的单选按钮列表工作并设置问题（输出范围变量证实了这一点），但引入“其他”功能让我很困惑。当我选择其他时，它似乎没有绑定到范围变量。我注意到在 dom 中它缺少 class="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/

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

• 对“其他”使用 ng-value 而不是普通的旧值
• 使用原语而不是点表示法（如果您希望视图可靠地写入变量，它需要是 something.yourVariable 而不是普通的旧 yourVariable）

希望这会有所帮助！

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 等速度较慢的浏览器中，它会阻止“{{blah}}”在所有内容加载时出现在屏幕上。较新版本的 Angular 也有 ng-cloak 用于此目的，我可能应该养成使用它的习惯。 :)（我还依稀记得读到“{{blah}}”会导致 IE 出现问题，但我很可能是编造的。）

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

实际上，有时我发现这很有用——您可以在视图中简单地操作一个变量以实现一些快速而肮脏的目的，而控制器不会发现它。 :)