在我的AngularJS应用程序中,我循环遍历数组对象并将值作为值发送到无线电输入.总体思路是用户选择一个单选框,并将值作为$ routeParams的一部分.不幸的是,变量{{ modelSelected }}在ng-repeat之外似乎不可用.为什么？第一个从不显示变量{{ modelSelected }}.
AngularJS是否在ng-repeat中创建了ScopeChild？
<html ng-app>
<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
<h3> Selected {{ modelSelected }} shown outside paragraph</h3>
<div ng-repeat="model in models">
<p>{{ model.name }} -
<input ng-model="modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
</p>
<h3> Selected {{ modelSelected }} shown inside paragraph</h3>
</div>
</body>
</html>
我正在试图找出如何设置UI.Bootstrap Typeahead(http://angular-ui.github.io/bootstrap/)仅在从下拉列表中进行选择时设置模型值,并清除该字段没有选择.
如果有一个不同的控制,这样做也会起作用.
Typeahead正在选择一个对象,如果用户只键入几个字符然后离开该字段,则将模型值设置为该字段的字符串值.我显然可以测试这种情况,但修改范围模型值不会刷新表单有效性.因此,如果我有一个必填字段,我还必须将字段的有效性设置为false.
这一切似乎都是某人必须已经想到的很多工作.有什么建议？
编辑
我的另一个想法是,最好的做法是将Typeahead与提交回服务器的范围值分开吗？
我遇到了一些奇怪的事情,这个例子在codepen中有效但在我的Ionic应用程序中不起作用.
当我更改select标签中的选项时,我想显示所选的值,但它不起作用,它表明undefined,我已经尝试了很多方面.
这不是原始代码,原始代码从外部API检索值并使用ngOptions填充选项(有效,填充正常).但它不会更新控制器中的值.
所以我决定让它变得更简单,它仍然无法工作:
HTML
<select ng-model="optionSelected" ng-change="selectUpdated()">
<option value="">Select an option</option>
<option value="h">Hello</option>
<option value="b">Bye</option>
</select>
JAVASCRIPT
$scope.selectUpdated = function() {
console.log('Updated');
console.log($scope.optionSelected);
};
我认为不需要更多代码,HTML包含在ion-view和中ion-content.没有显示错误,只显示'更新'输出和undefined.
更改选项时,我明白了undefined.但是在codepen中这个相同的代码工作得很好.. http://codepen.io/anon/pen/YXvYmq
有人能告诉我触发这种奇怪行为会发生什么吗？
提前致谢.
我有一个约会,我希望它有一个过滤器,所以它将具有我想要的格式.
HTML:
<input type="text" id="{{ID}}" ng-style="{color: color}" class="tdate ng-pristine ng-untouched ng-valid" ng-model="time.date | DatePlaceHolder">
过滤:
function DatePlaceHolder($filter) {
return function (value) {
return $filter('date')(value, "dd/MM/yyyy") || "--/--/----";
}
}
它工作正常但我不断收到此错误:
Error: [ngModel: nonassign] Expression 'time.date | DatePlaceHolder' is non-assignable. Element: <input type="text" id="{{ID}}" ng-style="{color: color}" class="tdate ng-pristine ng-untouched ng-valid" ng-model="time.date | DatePlaceHolder">
我有一个带有单选按钮的简单表单,它从服务器中提取值并循环遍历它们以提供单选按钮:
<form ng-submit="createSubCategory(subcategory)">
<div ng-repeat="sub_category in event_sub_categories" >
<label class="item item-radio">
<input type="radio" ng-model="subcategory" ng-value="'{{sub_category}}'" >
<div class="radio-content">
<div class="item-content">
{{sub_category}}
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Continue</button>
</div>
</form>
表格完美显示.但是,我按下的单选按钮似乎没有保存.这是createSubCategory方法:
$scope.createSubCategory = function(subcategory){
console.log(subcategory);
}
日志正在显示undefined.填写表格后如何记录子类别？
angularjs angularjs-controller angular-ngmodel ng-submit angularjs-ng-model
怎么样ngModelChange()？
(ngModelChange)是
ngModel指令的@Output .它在模型改变时触发.如果没有ngModel指令,则不能使用此事件
但我不确定,ngModelChange它是如何工作的,如果我使用ngModelChange()事件,即使我没有提供模型名称ngModel.
<input #gb type="text" pInputText class="ui-widget ui-text" **ngModel**
(ngModelChange)="functionName($event)">
html javascript angular-ngmodel angular angular-ngmodelchange
我的 angular 应用程序中有两个日期输入字段（fromDate 和 toDate）。我还有 3 个按钮“昨天”、“上周”、“上个月”。用户可以选择“从”和“截止”日期，也可以按其中一个按钮。
单击按钮后，必须正确填写起始日期和截止日期字段。我已将 ngModel 指令应用于这两个日期输入字段。这是我的 HTML
<div class="col-sm-4 filter-box">
<label>Filter by Date</label>
<div class="row content-even" >
<button class="btn btn-primary btn-sm my-1" (click)="yesterdayDateFilter()">Yesterday</button>
<button class="btn btn-primary btn-sm my-1">Last Week</button>
<button class="btn btn-primary btn-sm my-1">Last Month</button>
</div>
<div class="row mt-1 content-even" >
<div class="form-group">
<label for="fromDate">From </label>
<input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate">
{{fromDate}}
</div>
<div class="form-group">
<label for="toDate">To </label>
<input type="date" id="toDate" [(ngModel)]="toDate" name="toDate">
{{toDate}}
</div>
</div>
</div>
现在，当按下按钮时，我不确定如何填写日期字段。例如，当我按下昨天按钮时，我希望我的 todayDateFilter() 函数适当地更改起始日期和终止日期。这是我的昨天DateFilter() 的代码
yesterdayDateFilter(){
let yesterday = new …我创建了一个简单的组件，它包装了 bootstrap 的 typeahead 控制器，因此它按照我想要的应用程序配置方式进行配置。该组件有一个公共变量，selectedWorker即ngModel来自预输入的变量。
所以现在，当我在其他地方使用这个组件时，我想做这样的事情：
<app-worker-lookup [(ngModel)]="foo"></app-worker-lookup>
然后将foo调用者的变量绑定到具有所选值的查找组件的公共变量。我不知道如何实施。
我正在研究 Angular Form。我有一个具有一些属性的域模型。我通过使用绑定它们ngModel。
在此期间，如果我不使用name属性，则会出现以下错误。
ERROR 错误：如果在表单标签中使用 ngModel，则必须设置 name 属性或表单控件必须在 ngModelOptions 中定义为“独立”。
示例 1：
<input [(ngModel)]="person.firstName" name="first">
示例 2：
<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
为什么我需要提及name属性或ngModelOptions在双向绑定中绑定域模型时？
当我应用ngModelOptions="{standalone: true}"到我的所有字段时，无论控件（带有属性required）是否具有值，我的表单在所有情况下的 valid = true 。
我的表格是：
<form #detailForm="ngForm" (ngSubmit)="save(detailForm)" id="ngForm">
</form>
虽然我的提交按钮在表单之外：
<input type="button" form="ngForm" class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" [disabled]="!detailForm.form.valid" />
我列表中有一个项目，下拉列表的值是ROLES。我无法为下拉菜单设置ng-model。如果选择Actor，则希望将ng-model设置为Actor
<li class="dropdown" ng-model="$scope.Role">
<a class="dropdown-toggle" data-toggle="dropdown">VIEW ROLE AS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Actor</li>
<li>Director</li>
</li>
angular-ngmodel ×10
angularjs ×6
angular ×4
javascript ×3
date ×2
angular5 ×1
date-pipe ×1
filter ×1
html ×1
input-field ×1
ionic ×1
ng-submit ×1