This is not that a twisted problem but somehow confuses me.
HTML-A
This view renders a screen name (ex:Home) and all associated navigations with it.
<div ng-repeat="content in Data.ContentDataList">
<div>{{content.Name}</div>
<div>
<li ng-repeat="nav in content.NavigationList" >{{nav.Text}}</li>
</div>
</div>
HTML-B
In the same view this renders a list of all navigation available
<dl>
<dd ng-repeat="item in selectedItems">
<input type="checkbox" ng-model="item.isSelected" ng-click="addNav(item.contentData.Name )" />{{ item.contentData.Name }}
</dd>
</dl>
Controller
app.controller('NavController', ['$scope','Service','$routeParams', function ($scope, Service, $routeParams) {
$scope.items = [];
$scope.Data = [];
$scope.selectedItems = [];
$scope.addNav = function() {
????? Fire an event to add selected navigation from HTML-B to HTML-A ??????
};
Service.getData(xyz).then(function (results) {
$scope.Data = results.data;
$scope.items = $scope.Data.ContentDataList;
for(var i=0; i<$scope.items.length; i++) {
var mycl = {'contentData' : $scope.items[i],
'isSelected' : false };
$scope.selectedItems.push(mycl);
};
});
here is the addNav function;
$scope.addNav = function(cbName) {
content.NavigationList.push({text:cbName});
};
Related
I have input inside ng-repeat and input had a value from the database . I need to post my input in an object to the server but its undefined. However, when you touched or change the input value it works fine. why input triggers only when you touched or change the value?
html
<form name="form">
<ul>
<li ng-repeat="val in vals track by $index">
<input type="text" ng-value="val.ID" ng-model="data.val[$index]">
</li>
</ul>
<button type="button" ng-click="Submit()">Submit</button></form>
js
var app = angular.module('app', []);
app.controller('Controller', function($scope){
$scope.data = {};
$scope.fetch = function(){
$http.get("fetch.php").then(function (response) {
$scope.vals = response.data;
});
}$scope.fetch();
$scope.Submit = function(){
var formdata = $scope.data;
$http.post("post.php", formdata)
.then(function(response){
console.log(response.data);
});}});
<form name="form">
<ul>
<li ng-repeat="val in vals track by $index">
<input type="text" ng-init="data.val[$index] = val.ID" ng-model="data.val[$index]">
</li>
</ul>
<button type="button" ng-click="Submit()">Submit</button></form>
var app = angular.module('app', []);
app.controller('Controller', function($scope){
$scope.data = {val:{}};
$scope.Submit = function(){
var formdata = JSON.stringify($scope.data.val);
$http.post("post.php", {"val":formdata})
.then(function(response){
console.log(response.data);
});
}});
I'm new in AngularJS. Please have look to this:
Now when user clicks on "All" link, all the 11 check boxes should be checked and when user clicks on "None" link, all the 11 check boxes should be unchecked.
Plus when user check the All others check box, all the bottom 9 check boxes should be checked and when user uncheck the All others check box, all the bottom 9 check boxes should be unchecked.
I'm able to achieve one of the task at a time, but not simultaneously.
So, can anybody please help me to achieve both the tasks simultaneously?
Any help would be appreciated.
You can use
HTML
<body ng-controller="MainCtrl">
<button ng-click="selectAll()">Select All</button>
<button ng-click="clearAll()">Clear All</button>
<input type="checkbox" ng-model="select" ng-click="checkAll()" />
<br />
<p>Checkboxes</p>
<input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
</body>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.checkbox = [
{
selected: false
},
{
selected: false
},
{
selected: false
}
];
// Check/uncheck all boxes
$scope.selectAll = function () {
$scope.select = true;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = true;
});
};
$scope.clearAll = function () {
$scope.select = false;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = false;
});
};
$scope.checkAll = function () {
angular.forEach($scope.checkbox, function (obj) {
obj.selected = $scope.select;
});
};
});
Refer fiddle
Html
<button ng-click="selectAll()"> all</button>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="selected[item.id]">
</div>
JQuery
$scope.selected = {};
$scope.selectAll= function(){
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
$scope.selected[item.id] = true;
}
};
you can use ng-Checked
Its makes you easier
refer ng-Checked
<md-checkbox ng-click="checked = !checked; check = {}"></md-checkbox>
<div ng-repeat="item in [1,2,3,4,5]">
<md-checkbox ng-checked="checked || check[item]" ng-click="check[item] = !check[item]" ng-model="sel[item]"></md-checkbox>
</div>
I'm looking for an explanation of how angular binding works behind the curtain. I only want $scope.values to be updated on ng-click, but once its clicked once it bound to the form forever. woah. Why?
First example is NOT working as I expected it to work. The values should only be reflected in the span everytime I click on my button.
http://jsfiddle.net/webmandman/Ls4g4yLn/12/
html:
<div ng-app="app" ng-controller="myCtrl">
<div>
<span ng-repeat="value in values">{{value.text}}</span><br>
<input ng-repeat="field in fields" type="text" name="{{field.name}}" ng-model="field.text"/>
</div>
<button ng-click="display()">display</button>
</div>
controller:
var app = angular.module('app', []);
angular.module('app').controller("myCtrl", function($log,$scope, $http) {
$scope.fields = [
{name:"Name", text:null},
{name:"Phone", text:null}
];
$scope.display = function(){
$log.log("display has been called...");
$scope.values = $scope.getValues()
};
$scope.getValues = function(){
$log.log('getValues was called.');
var list = [];
angular.forEach($scope.fields, function(value, index){
//$log.log(item);
$log.log(value);
$log.log(index);
this.push(value);
//this.push(item);
},list);
return list;
};
});
This example is working like I want it too, but it is not using ng-repeat.
http://jsfiddle.net/webmandman/Ls4g4yLn/13/
html:
<div ng-app="app" ng-controller="myCtrl">
<div>
<span>{{values.join(',')}}</span><br>
<input ng-repeat="field in fields" type="text" name="{{field.name}}" ng-model="field.text"/>
</div>
<button ng-click="display()">display</button>
</div>
controller:
var app = angular.module('app',[]);
angular.module('app').controller("myCtrl", function($log,$scope, $http) {
$scope.fields = [
{name:"Name", text:null},
{name:"Phone", text:null}
];
$scope.display = function(){
$log.log("display has been called...");
$scope.values = $scope.getValues()
};
$scope.getValues = function(){
var list = [];
angular.forEach($scope.fields, function(value, index){
//$log.log(item);
$log.log(value);
$log.log(index);
this.push(value.text);
//this.push(item);
},list);
return list;
};
});
That's because in your $scope.values, you push refercnes to your $scope.fields, hence then when you edit a field text, it is rendered in both places.
Instead, you can simply push the text in your values, as String are passed by copy and not reference (that's pure Javascript not related to Angular).
Here is a working fiddle:
http://jsfiddle.net/zrwq6cmu/
I am using Angularfire and I'd like to remove the items by checkbox.
And there is a button that can do the "checkAll" and another do the "uncheckAll"
HTML
<div ng-app="app" ng-controller="Ctrl">
<li ng-repeat="item in newslist">
<input type="checkbox"> {{item.newsTitle}}
</li>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="newslist.$remove(item)">Remove</button>
</div>
JS
var app = angular.module("app", ["firebase"]);
app.value('newsURL', 'https://XXX.firebaseio.com/XXX/');
app.factory('newsFactory', function($firebase, newsURL) {
return $firebase(new Firebase(newsURL)).$asArray();
});
app.controller('Ctrl', function($scope, $firebase, newsFactory) {
$scope.newslist = newsFactory;
$scope.checkAll = function() {
};
$scope.uncheckAll = function() {
};
});
plunker here
I don't know how to remove the items by checkbox or how to make the "checkAll" button work.
I will be appreciate if someone could tell me your answer.
Here is function you would need to check/uncheck and for removing items:
$scope.checkAll = function() {
$scope.newslist.forEach(function(el) {
el.checked = true;
$scope.newslist.$save(el);
});
};
$scope.uncheckAll = function() {
$scope.newslist.forEach(function(el) {
el.checked = false;
$scope.newslist.$save(el);
});
}
$scope.remove = function() {
$scope.newslist.forEach(function(item) {
if (item.checked) {
$scope.newslist.$remove(item);
}
});
};
Demo: http://plnkr.co/edit/GsGVsGGjNwW4i1kTOuko?p=preview
I added checked property for ngModel directive.
HTML becomes:
<li ng-repeat="item in newslist">
<input type="checkbox" ng-model="item.checked">{{item.newsTitle}}
</li>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="remove()">Remove</button>
My view is:
<div class="container" ng-controller="MyController">
<div class="row">
<div class="col-md-8">
<textarea class="form-control" rows="10" ng-model="myWords" ng-change="parseLanguage()"></textarea>
</div>
<div class="col-md-4" ng-show="sourceLanguage !== null">
Language: {{ sourceLanguage }}
</div>
</div>
</div>
My controller is:
webApp.controller('MyController', [
'$scope', '$rootScope', 'TranslateService', function($scope, $rootScope, CodeService) {
$scope.init = function() {
return $scope.sourceLanguage = null;
};
$scope.parseLanguage = function() {
return TranslateService.detectLanguage($scope.myWords).then(function(response) {
console.log($scope.sourceLanguage);
$scope.sourceLanguage = response.data.sourceLanguage;
return console.log($scope.sourceLanguage);
});
};
return $scope.init();
}
]);
The console logs show the right data. But in the view, sourceLanguage never updates. Why would this be?
In case the promise you are evaluating is not part of the Angular context you need to use $scope.$apply:
$scope.parseLanguage = function() {
TranslateService.detectLanguage($scope.myWords).then(function(response) {
$scope.$apply(function() {
$scope.sourceLanguage = response.data.sourceLanguage;
});
});
};