How ng-repeat handles content-scope variables inside it
All:
I am new to AngularJS scope. I wonder if anyone can even talk about a procedure as ng-repeat
dealing with a variable specified in the html inside it.
For example:
<html ng-app="app">
<body ng-controller="main">
<div ng-repeat="d in data" ng-init="edited_odd_times=false" ng-click="editdata()">
<span>{{d}}: {{edited_odd_times}}</span>
</div>
</body>
<script>
var app = angular.module("app", []);
app.controller("main", function($scope){
$scope.data = [1, 2, 3, 4];
$scope.data2 = [{d:1}, {d:2}, {d:3}, {d:4}];
$scope.editdata = function(){
// Here is my confuse, how can I access the d and edited_odd_times inside ng-repeat without putting them as paramters
}
});
</script>
</html>
What I want to know:
[1]. I wonder what's inside $scope.editdata
how to change d and edit_odd_times without putting them as parameters, or how can I access the scope generated by ng-repeat?
[2]. Why ng-repeat
can it affect a variable inside the HTML inside it, whereas a directive (for example, I want to define a directive work, for example ng-repeat
, but just not repeat) with scope:true
and transclude, cannot affect the variable in that HTML?
thank
source to share
Direct answer to your quastion below.
[1] You must be thinking that there is no way to access the value generated in the child area from its parent area. In other words, the control scope should not access the value of the scope generated in the directive.
[2] You can use ngTransclude. Please check the whitepaper again.
I present what you want to achieve as shown below.
The Html.
<div ng-app="testapp" ng-controller="testctrl">
<div ng-repeat="d in data">
{{d}}
</div>
</div>
In the controller code.
angular.module('testapp', [])
.controller('testctrl', function($scope){
$scope.data = [1,2,3];
angular.forEach($scope.data, function(item, i){
if (i%2==0){
$scope.data[i] = item + '(edited)';
}
});
})
Hope this helps you. :)
source to share