I am trying to do the following:
I have two controllers that communicate to each other via a service ( Here is my jsFiddle: http://jsfiddle.net/GeorgiAngelov/a9WLr/1/).
The idea:
The idea is that modifying one controller will reflect in the other controller's fields, hence creating liveupdate functionality. However, current the SecondCtrl updates all 4 input fields at the same time, and vice-versa, and every single input updates all 4 the same time as well.
What I am trying to accomplish:
What I want to accomplish is the following: I want whenever I click on any of the input fields in controller one, I want it to populate the input box of controller two so then controller two can actually modify that input field that was originally clicked.
HTML
<body ng-app="project">
<div ng-init=" data = [3,4,5,6]">
<h2>{{name}}</h2>
<input ng-model="thing.x"/ ng-repeat="singledata in data" ng-controller="FirstCtrl">
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
JS
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
I would probably do something like this, to avoid repeating all the elements again. I've chaned around the theService API, as it was pretty generic and I wasn't really sure what its actual purpose was.
A working example can be found here: http://jsfiddle.net/BinaryMuse/rpfAV/
<body ng-app="project">
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="theService.things[key]"
ng-repeat="(key, value) in theService.things" ng-click="edit(key)">
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="theService.things[theService.editing]"/>
</div>
</body>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
editing: null,
things : {
w : 100,
x : 200,
y : 300,
z : 400
}
};
});
function FirstCtrl($scope, theService) {
$scope.theService = theService;
$scope.name = "First Controller";
$scope.edit = function(key) {
theService.editing = key;
};
}
function SecondCtrl($scope, theService) {
$scope.theService = theService;
$scope.name = "Second Controller!";
}