Question

如何使用AngularJS按查询字符串值页面加载设置单选按钮值？

我的观看代码

选项一：此字段可以填充＆＃34; $ scope.purpose＆＃34;控制器中的项目，但不选择单选按钮。

<input id="QueryStringLoanType" type="hidden" ng-model="data.purpose" ng-init="data.purpose = setLoanType()" />

选项二：此字段可以填充＆＃34; $ scope.data.purpose＆＃34;指令中的项目，并选择正确的单选按钮，但我必须硬编码值才能工作。

<input id="QueryStringLoanType" type="hidden" ng-model="data.purpose" ng-init="data.purpose = 'purchase'" />

我的控制器

// Function: Set loan type
$scope.setLoanType = function () {
var queryStringLoanType = $location.search().loan_purpose;
$scope.purpose = queryStringLoanType;
if (queryStringLoanType == 'refi-loan') {
  $scope.purpose = "refinance";
}
if (queryStringLoanType == 'purchase-loan') {
  $scope.purpose = "purchase";
}
};

HTML

<div class="col-xs-12 col-sm-6 col-sm-offset-3 text-center">
  <label class="btn btn-cta btn-lg btn-block">
    Refinance
    <input type="radio" name="QuestionButton" ui-sref="home.custname" ng-model="data.purpose" value="refinance" ng-change="processForm()" />
  </label>
</div>

<div class="col-xs-12 col-sm-6 col-sm-offset-3 text-center">
  <label class="btn btn-cta btn-lg btn-block">
    Purchase
    <input type="radio" name="QuestionButton" ui-sref="home.custname" ng-model="data.purpose" value="purchase" ng-change="processForm()" />
  </label>
</div>

非常感谢任何帮助！

Answer 1

可能你的问题在于你的单选按钮。您需要将[{1}}属性替换为无线电元素中的value。

您可能会被声明为单选按钮

ng-value

工作单选按钮

<input type="radio" name="radio1" ng-model="data.purpose" value="purchase"/>
<input type="radio" name="radio1" ng-model="data.purpose" value="refinance"/>

仅将<input type="radio" name="radio1" ng-model="data.purpose" ng-value="purchase"/> <input type="radio" name="radio1" ng-model="data.purpose" ng-value="refinance"/>属性更改为value，Angular将管理该范围变量的值绑定。

从你的问题来看，事情并没有结束。

我希望这可以帮到你。感谢。

Answer 2

我自己没有发布这个问题，但在使用不同的解决方案后，这对我有用。

我的表单是一个在我的网站上全局运行的共享表单，但在尝试将我的部分表单视图加载到我正在构建的新登录页面时失败了。我的问题是我无法以角度形式填充指令模型值，而无需将值硬编码为ng-int属性。我确信有更好的方法来解决这个问题，所以请随意发表评论。

我的解决方案是将我的部分视图包含在我的目标网页上，并带有我指令名称的标记。

例如：

<my-directive>

    <!-- Form Field -->
    <input />

    <!-- Form Field -->
    <input />

</my-directive>

如何使用AngularJS在页面加载时通过查询字符串值设置单选按钮值

2 个答案: