目前,我正在学习AngularJS和我难以理解的区别ng-bind和ng-model.
任何人都可以告诉我他们的差异,以及何时应该使用另一个？
可能是愚蠢的问题,但我的html表单有简单的输入和按钮:
<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}
然后在控制器中(从routeProvider调用模板和控制器):
$scope.check = function () {
console.log($scope.searchText);
}
为什么我在单击按钮时看到视图更新正确但在控制台中未定义？
谢谢!
更新:似乎我已经解决了这个问题(之前不得不提出一些解决方法):只需要将我的属性名称更改searchText为search.text,然后$scope.search = {};在控制器中定义空对象并瞧...不知道为什么它正在工作虽然;]
我正在使用Angular 4,我在控制台中收到错误:
无法绑定到'ngModel',因为它不是'input'的已知属性
我该如何解决这个问题？
我正在使用Angular JS,我需要使用angular JS设置下拉列表控件的选定选项.请原谅我,如果这很荒谬,但我是Angular JS的新手
这是我的html的下拉列表控件
<select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
ng-show="item.id==8" ng-model="item.selectedVariant"
ng-change="calculateServicesSubTotal(item)"
ng-options="v.name for v in variants | filter:{type:2}">
</select>
填充后,我得到了
<select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 && item.quantity > 0" class="ng-pristine ng-valid ng-valid-required">
<option value="?" selected="selected"></option>
<option value="0">set of 6 traits</option>
<option value="1">5 complete sets</option>
</select>
如何设置value="0"要选择的控件？
我以不同的形式发布了同样的问题,但没有人回答.我没有清楚地了解格式化程序和解析器在角度js中的作用.
根据定义,Formatters和Parsers看起来与我类似.也许我错了,因为我是这个angularjs的新手.
每当模型值发生变化时,作为管道执行的函数数组.反过来,每个函数都被调用,将值传递给下一个函数.用于格式化/转换值以在控件和验证中显示.
每当控件从DOM读取值时,作为管道执行的函数数组.反过来,每个函数都被调用,将值传递给下一个函数.用于清理/转换值以及验证.对于验证,解析器应使用$ setValidity()更新有效性状态,并为无效值返回undefined.
请通过一个简单的例子帮助我理解这两个功能.两者的简单说明将不胜感激.
这是我的HTML:
<input id="selectedDueDate" type="text" ng-model="selectedDate" />
当我在框中输入时,模型通过双向绑定机制进行更新.甜.
但是,当我通过JQuery这样做...
$('#selectedDueDate').val(dateText);
它不会更新模型.为什么？
我在角度应用程序中使用bootstrap日期选择器.然而,当我从该日期选择器中选择一个日期选择器时,我已经更新了绑定的ng-model,我想要一个日期格式为'MM/dd/yyyy'的ng-model.但它每次都像这样约会
"2009-02-03T18:30:00.000Z"
代替
02/04/2009
我为同一个plunkr链接创建了一个plunkr
我的Html和控制器代码如下所示
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
<p>above filter will just update above UI but I want to update actual ng-modle</p>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="{{format}}"
ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p> …datepicker angularjs angular-ui angular-ui-bootstrap angular-ngmodel
我创建了以下示例,以便您可以准确地看到发生了什么:http: //jsfiddle.net/8t2Ln/101/
如果我使用ng-options,会发生同样的事情.我有一个不同的理由这样做,但为了简化示例留下该部分.
正如您所看到的,它默认有两个选项.我在选择旁边显示ng-model的选定值,这样你就可以看到它是什么.当您使用顶部部分添加第三个选项时,它将值设置为该新选项的值,如选择旁边显示的ng-model值所示,但select本身不会更改以显示正确的值选择.
以下是链接中的示例代码:
var testApp = angular.module('testApp', ['ngRoute']);
testApp.controller('Ctrl', function ($scope) {
$scope.newInput = '';
$scope.inputDevice = [
{
value: '1',
label: 'input1'
},
{
value: '2',
label: 'input2'
}
];
$scope.selectedDevice = '';
$scope.addType = function () {
var newElem = {
label: $scope.newInput,
value: '3'
};
$scope.inputDevice.push(newElem);
$scope.selectedDevice = newElem.value;
};
});
这是html:
<div ng-app="testApp">
<div ng-controller="Ctrl">
<p>
<input type="text" ng-model="newInput" />
<br />
<button ng-click="addType()">Add Type</button>
</p>
<select ng-model="selectedDevice">
<option></option>
<option ng-repeat="i in …问题:
我的页面中有一个SELECT元素,用一个填充ng-repeat.它还有ng-model一个默认值.
当我改变值时,ng-model适应,这没关系.但是下拉列表在启动时显示一个空槽,它应该具有选择默认值的项目.
码
<div ng-app ng-controller="myCtrl">
<select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
<option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
</select>
</div>
用JS:
function myCtrl ($scope) {
$scope.units = [
{'id': 10, 'label': 'test1'},
{'id': 27, 'label': 'test2'},
{'id': 39, 'label': 'test3'},
]
$scope.data = {
'id': 1,
'unit': 27
}
};
我是angular2的新手.我想将文本区域中的用户输入存储在组件中的变量中,以便我可以将一些逻辑应用于此输入.我试过ngModel但它不起作用.我的textarea代码:
<textarea cols="30" rows="4" [(ngModel)] = "str"></textarea>
在我的组件内:
str: string;
//some logic on str
但str我的组件内部没有任何价值.我使用的方式有错误ngModule吗？
angular-ngmodel ×10
angularjs ×8
javascript ×4
data-binding ×3
angular ×2
jquery ×2
angular-ui ×1
datepicker ×1
ng-bind ×1
selected ×1
textarea ×1