针对angularjs–如何在不改变ng-repeat的$index的情况下使用ng-filter？和angularjsng-change这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展$i
针对angularjs – 如何在不改变ng-repeat的$index的情况下使用ng-filter？和angularjs ng-change这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展$index的ngRepeat里面angularjs指令、Angular 2：JQuery UI Datepicker不改变ngModel、AngularJs Filter自定义过滤器控制ng-repeat去除重复、AngularJS ng-repeat下使用ng-model等相关知识，希望可以帮助到你。
本文目录一览：- angularjs – 如何在不改变ng-repeat的$index的情况下使用ng-filter？（angularjs ng-change）
- $index的ngRepeat里面angularjs指令
- Angular 2：JQuery UI Datepicker不改变ngModel
- AngularJs Filter自定义过滤器控制ng-repeat去除重复
- AngularJS ng-repeat下使用ng-model
angularjs – 如何在不改变ng-repeat的$index的情况下使用ng-filter？（angularjs ng-change）
这是我的代码：
<input ng-model="query.teamName" /></div>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Team</th>
<th>Location</th>
<th>score</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in teams | filter:query | orderBy:orderByscore:reverseSort">
<td><span>{{$index+1}}</span></td>
<td>{{team.teamName}}</td>
<td>{{team.teamLocation}}</td>
<td>{{team.teamPoints | number:2}}</td>
</tr>
</tbody>
</table>
控制器：
scoreboard.controller('scoreboardCtrl',function ($scope,$filter) {
$scope.orderByscore = 'teamPoints';
$scope.reverseSort = true;
$scope.teams = [
{ "teamName": "motorboat skydive","teamLocation": "1189 King","teamPoints": 35.53},{ "teamName": "the grinders","teamPoints": 127.90},{ "teamName": "team forrec","teamPoints": 29.46},{ "teamName": "bikini finger","teamPoints": 21.98},{ "teamName": "la familia","teamPoints": 148.32},{ "teamName": "darkness is","teamPoints": 108.88},{ "teamName": "grinders","teamPoints": 167.95},{ "teamName": "discarded youth","teamPoints": 55.52}
];
};
解决方法
<tr ng-repeat="team in teams | filter:query | orderBy:orderByscore:reverseSort" ng-init="idx = $index+1">
<td><span>{{idx}}</span></td>
Plnkr
由于索引在你的情况下是至关重要的,因为它是排名最好的方法来处理这可能是从控制器本身添加索引.
$scope.teams = [
{ "teamName": "motorboat skydive","teamPoints": 55.52}
]
.sort(function(itm1,itm2){ return itm2.teamPoints - itm1.teamPoints }) //Sort teams
.map(function(itm,idx){ itm.index = (idx+1); return itm; }); //assign rankings
我使用本机排序或者只是在控制器中使用角度orderByFilter本身为初始集合(并从视图中删除ng-init变量赋值的逻辑).因此,您不会运行运行时$index问题.
Plnkr2
$index的ngRepeat里面angularjs指令
除非有更好的方法这样做，我试图做这个功能基于这个文档从指令：
& or &attr – provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget deFinition of scope: { localFn:’&myAttr’ },then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it’s desirable to pass data from the isolated scope via an expression and to the parent scope,this can be done by passing a map of local variable names and values into the expression wrapper fn. For example,if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).
http://docs.angularjs.org/guide/directive
我很难理解这句话告诉我什么。所以，我试图做的是这…
首先，ngRepeat指令与我的指令一起使用在“testTemplate”中：
<ul> <li my-attr="test()" my-directive ng-repeat="value in values"> </li> </ul>
接下来，我的指令定义：
angular.module('myModule',[])
.directive('myDirective',function() {
return {
replace : true,transclude : true,scope : {
test: '&myAttr'
},templateUrl: 'partials/myTemplate.html',link : function(scope,element,attrs) {
alert(scope.count);
}
}
});
现在终于，我试图定义的控制器内的“测试”函数为引用指令的父模板。
function TestTemplateCtrl($scope,testTemplate) {
$scope.test = function() {
alert('in test');
$scope.count = "1";
}
}
所以第一个问题是我的“测试”函数在父中没有被执行。也许我不明白如何应该调用父控制器中的测试函数。现在我实际上还没有增加，但是是上面的正确的方式，我会去增加我的计数，当我到达那一点，如果我可以得到测试功能开火？
<li my-directive index="{{$index}}" ng-repeat="value in values">
指示：
myApp.directive('myDirective',function() {
return {
replace: true,// transclude: true,scope: {
index: '@'
},template: '<div>testing {{index}}</div>',link: function(scope,attrs) {
// ...
}
}
});
Fiddle。
Angular 2：JQuery UI Datepicker不改变ngModel
这是我的意见：
<input [ngModel]="SeasonStartDate" (ngModelChange)="updateSeasonStartDate($event)"id="SeasonStartDate" name="SeasonStartDate" type="text" autocomplete="off">
Date: {{SeasonStartDate}}
我在输入下面添加了Date：{{SeasonStartDate}},因此我可以测试该值是否正在更新.
以下是我的组件中更新值的代码：
updateSeasonStartDate(updateSeasonStartDate: any) {
console.log(updateSeasonStartDate);
this.SeasonStartDate = updateSeasonStartDate;
}
如果我删除日期选择器类(启动日期选择器所需)并且我只是手动输入输入,SeasonStartDate将按预期更新,所以我知道我的其余代码工作,它只是结束日期选择器打破它.如何让ngModel和JQuery UI Datepicker一起工作？这可能吗？我知道还有其他日期选择器专门用于Angular 2,但如果可能的话我更喜欢JQuery的版本.
解决方法
首先,我将输入更新为如下所示：
<input [(ngModel)]="SeasonStartDate" #startDate (click)="updateSeasonStartDate(startDate.value)"id="SeasonStartDate" name="SeasonStartDate" tabindex="5" type="text" autocomplete="off">
重要的变化是添加#startDate和(click)=“updateSeasonStartDate(startDate.value)”
这表示,当您单击此输入时,调用updateSeasonStartDate()并传入输入的当前值.现在单独不会给我想要的结果,因为我想在输入新日期的任何时候将输入的值绑定到我的SeasonStartDate变量,而不仅仅是在点击输入时,这就是为什么我还添加了以下代码到ngOnInit函数：
$('body').on('change','#SeasonStartDate',function() {
$('#SeasonStartDate').trigger('click');
});
现在,只要输入的值发生变化,就会调用updateSeasonStartDate()并按照我的意愿更改SeasonStartDate.这肯定是一个hacky工作,你可能想知道我为什么不简单地(改变)而不是(点击)我的输入.这是因为无论出于何种原因,当使用JQuery Date Picker时输入值发生变化时,(change)事件不会注册.我不知道这是否是Angular 2的错误,或者它是否是预期的行为,但这是我能让它工作的唯一方法.
如果有人有更好的解决方案,请告诉我,我会接受您的回答.
AngularJs Filter自定义过滤器控制ng-repeat去除重复
代码：
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in items | unique:'id'">
{{x.id}}---{{x.name}}
</p>
</div>
<script>
//AngularJs 自定义过滤器
//1.使用过滤器，去除重复
angular.module('common',[]).filter('unique',function () {
return function (collection,keyname) {
console.info(collection);
console.info(keyname);
var output = [],keys = [];
angular.forEach(collection,function (item) {
var key = item[keyname];
if (keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
}
});
var app = angular.module('myApp',['common']);
app.controller('myCtrl',function ($scope) {
//$scope.items = [1,2,3,2];
//当前unique 的过滤只针对，对象数组过滤
$scope.items = [
{ id: 1,name: 'zhangsan' },{ id: 2,name: 'lisi' },{ id: 1,];
});
</script>结果：
AngularJS ng-repeat下使用ng-model
初学AngularJS 对于作用域的问题不是很了解，因为是自学，没有详细教程，被一个简单的问题困扰了两天。
以下是转载的内容，加深一下个人记忆。
blue:<input type="radio" value="1" ng-model="selectValue"/> red:<input type="radio" value="2" ng-model="selectValue"/> yellow: <input type="radio" value="3" ng-model="selectValue"/>
以上代码实现一个单选框功能，当你选中其中的一个单选框，可以从$scope.selectValue中得到你选中的的选项的value。
同时改变$scope.selectValue的值，也可以让界面上选中相应的单选框。
假设单选框的个数是不固定的，用ng-repeat来展现。
<table>
<tr ng-repeat="row in collections">
<td>
{{row.name}}: <input type="radio" value="{{row.value}}" ng-model="selectValue"/>
</td>
</tr>
</table>
当你书写了上述代码后。你会发现点击其中的对话框，$scope.selectValue中并没有保存你选中的对应单选框的值。
这是因为处在ng-repeat之间的代码，对全局的$scope里变量的内容是不可见的，像{{row.name}}里的row，并不是全局$scope里的成员。
而是为ng-repeat创建的子scope里面的。所以要引用全局$scope里的成员，你可以使用$parent 来引用全局的$scope
<table>
<tr ng-repeat="row in collections">
<td>
{{row.name}}: <input type="radio" value="{{row.value}}" ng-model="$parent.selectValue"/>
</td>
</tr>
</table>
转载地址： http://zhaoyanblog.com/archives/97.html
关于angularjs – 如何在不改变ng-repeat的$index的情况下使用ng-filter？和angularjs ng-change的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于$index的ngRepeat里面angularjs指令、Angular 2：JQuery UI Datepicker不改变ngModel、AngularJs Filter自定义过滤器控制ng-repeat去除重复、AngularJS ng-repeat下使用ng-model等相关知识的信息别忘了在本站进行查找喔。
本文标签：
