Please look at http://jsfiddle.net/mahbub/sbNty/4/
<div ng-app="">
<div ng-controller="Ctrl">
<ul>
<li ng:repeat="status in statuses"><label><input type="checkbox" data-ng-model="status.type" data-ng-true-value="closed" data-ng-false-value="{{status.type}}" />{{status.type}}</label></li>
</ul>
</div>
</div>
As you can see the label of the checkboxes are printed based on the status type from the JSON. Now on unchecking, the label becomes false. I must be missing some correct way to get back to the originial label text upon unchecking the checkbox.
I mean when I uncheck, the label needs to be "open" or whatever it was initially.
Any help is greatly appreciated.
Thanks
Finally i did it using ngInit and setting a different variable within the scope object. See the demonstration here http://jsfiddle.net/mahbub/sbNty/5/
<div ng-app="">
<div ng-controller="Ctrl">
<ul>
<li ng:repeat="status in statuses"><label><input ng-init="status.oldStat=status.type" type="checkbox" ng-model="value" ng-click="selectV(value,this)">{{status.type}}</label></li>
</ul>
</div>
</div>
Controller :
'use strict';
function Ctrl($scope) {
$scope.statuses = [{
id: 1,
type: 'open'},
{
id: 2,
type: 'open'},
{
id: 3,
type: 'new'},
{
id: 4,
type: 'closed'},
{
id: 5,
type: 'open'},
{
id: 6,
type: 'new'},
{
id: 7,
type: 'open'}
];
$scope.selectV = function(val, stat) {
if (val) {
stat.status.type = "closed";
} else {
stat.status.type = stat.status.oldStat;
}
}
}
Related
I have radio buttons and 'delete' text with ng repeat,here based on radio button checked I need to show the delete text,whenever I click on radio button 'delete' text should show and again when I click to next radio button 'delete' should hide for previous unchecked radio button and should show for next checked radio button.
For me its working but onclick of next radio button previous 'delete' text is not hiding.Code is given below.Can anyone help me I am new to angularjs.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.div_ = [];
$scope.items = [{
id: 1,
title: "first item"
},
{
id: 2,
title: "second item",
},
{
id: 3,
title: "third item",
}
];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="app.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<ul ng-repeat="item in items">
<li style="color:red;display:inline" ng-click="item=1"><input type="radio" name="samename" value={{$index}}></li>
<li style="color:blue;display:inline;margin-left:100px;" name="samenaame" ng-show="item==1" ng-show="item==1">delete</li>
</ul>
</div>
I tried to do minimum amount of changes to your main code, but I think it is flawed.
Not sure what you are trying to achieve with the multiple ul's you had, so I removed them.
You can use ng-repeat-start and -end as in this example, maybe that's what you want.
This code will only show one extra "li" depends on which ID you selected. (using a "helper" property)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.div_ = [];
$scope.selectedItem;//or nothing
$scope.items = [{
id: 1,
title: "first item"
},
{
id: 2,
title: "second item",
},
{
id: 3,
title: "third item",
}
];
$scope.handleClick = function (item) {
$scope.selectedItem = item;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<ul>
<li ng-repeat-start="item in items" style="color:red;display:inline" ng-click="handleClick(item)">#Item={{item.id}}
<input type="radio" name="samename" value={{$index}}>
</li>
<li ng-repeat-end style="color:blue;display:inline;margin-left:100px;" ng-show="selectedItem==item">delete #{{item.id}}</li>
</ul>
</div>
I am fetching some records which are already assigned to users with checked checkboxes. I want to assign some additional ones that are coming as unchecked checkboxes. How can I show checked checkboxes first and then show whatever is unchecked after them?
You can use angular filters to show checked checkboxes first and whatever is unchecked, show it after them
try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [
{id: 1, value: 1},
{id: 2, value: 0},
{id: 3, value: 1},
{id: 4, value: 0},
{id: 5, value: 0}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>Checked</h2>
<div ng-repeat="item in data | filter : { value : 1}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
<h2>Unchecked</h2>
<div ng-repeat="item in data | filter : { value : 0}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
</div>
</div>
Hope it helps..
Here is my running code in Plunker
I got a bug: When I uncheck the answer, I do not want to count how many times we select this answer? We will only count the number when we check the answer. For example, I check "Yes", I uncheck "Yes", I check "Yes" again, I will only show "Yes" was selected 2 times, instead of 3 times.
I read some posts about this issue, but cannot make it work by using checked property?
<input type="checkbox" ng-change="answerSelected(ans)" ng-model="checkAnswer">{{ans.answer}}
change the ng-model to object property like ng-model="ans.checkAnswer"
<input type="checkbox" ng-change="answerSelected(ans)" ng-model="ans.checkAnswer">{{ans.answer}}
Then change the function like this
$scope.answerSelected = function(checkAnswer) {
if (checkAnswer.checkAnswer) {
checkAnswer.count++;
}
$scope.answerBoxSelected = true;
};
Demo
Just add a check like this,
if (checkAnswer) {
ans.count++;
$scope.answerBoxSelected = true;
}
DEMO
// Code goes here
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.questions = [{
id: 1,
question: "Do you like Foo?",
answers: [{
answer: "Yes",
count: 0,
id: 1,
question_id: 1
}, {
answer: "No",
count: 0,
id: 2,
question_id: 1
}]
},
{
id: 2,
question: "Do you like Bar?",
answers: [{
answer: "Yes",
count: 0,
id: 1,
question_id: 2
}, {
answer: "No",
count: 0,
id: 2,
question_id: 2
}]
}
]
$scope.question_index = 0;
$scope.answerSelected = function(checkAnswer,ans) {
if (checkAnswer) {
ans.count++;
}
$scope.answerBoxSelected = true;
};
$scope.nextQuestion = function() {
$scope.question_index++;
$scope.answerBoxSelected = false;
};
});
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group" ng-if="question_index < questions.length">
<div ng-repeat="item in questions">
<div ng-if="question_index == $index">
<h2>{{item.question}}</h2>
<div ng-repeat="ans in item.answers">
<input type="checkbox" ng-change="answerSelected(checkAnswer,ans)" ng-model="checkAnswer">{{ans.answer}}
<br>
</div>
<div ng-if="answerBoxSelected" class="alert alert-warning">
<h3>Answer Selection Summary</h3>
<div ng-repeat="ans in item.answers">
<p>
"{{ans.answer}}" Has been selected {{ans.count}}
<span ng-if="ans.count == 0">time</span>
<span ng-if="ans.count > 0">times</span>
<p>
</div>
</div>
<button class="btn btn-info btn-lg" ng-if="answerBoxSelected && question_index < questions.length - 1" ng-click="nextQuestion()">Next Question > </button>
</div>
</div>
</div>
<div class="alert alert-success" ng-if="question_index == questions.length - 1 && answerBoxSelected">
Congratulations! You answered all the questions. Good job!
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
One workaround is to pass the element itself to the answerSelected method, and check its checkAnswer property. We will only increment the count if this property is true.
<input type="checkbox" ng-change="answerSelected(ans, this)" ng-model="checkAnswer">{{ans.answer}}
$scope.answerSelected = function(checkAnswer, elem) {
if (elem.checkAnswer === true) {
checkAnswer.count++;
}
$scope.answerBoxSelected = true;
};
You can call the function conditionally only when the checbox is checked:
<input type="checkbox" ng-change="!checkAnswer || answerSelected(ans)" ng-model="checkAnswer">{{ans.answer}}
When the checkbox is checked, checkAnswer will evaluate to true, and the function will be called.
When the checkbox is unchecked, checkAnswer will evaluate to false, and the function will not be called.
Here's a plunker
<div class="district-list" ng-repeat="office in offices | filter : {'DisplayOffice' : officeLocationLevelList.searchText}|limitTo:1">
Have a multilevel list of data. depending on the condition i want to filter the data.(First Level/ inner level). If the first level is selected then i have to search with one json attribute and if the inner level is selected then search with another json attribute. I have set it in a scope variable. How can use scope variable instead of 'DisplayOffice'
you can bind a function to filter which returns the filter condition using scope variables.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
$scope.getCondition = function() {
var obj = {};
obj[$scope.key] = $scope.value;
return obj;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]:value}">
{{item.name}}
</div>
</div>
and there is another way while using ES6' new feature {[key]: value}, but this may now work for some browsers.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.$watch("key", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.$watch("value", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]: value}">
{{item.name}}
</div>
</div>
I am using angular-ui's sortable-ui module and am trying to raise a cancel so that the dragged items returns to it original location in the source list. Unfortunately I cannot get this working. Here is an example:
http://jsfiddle.net/Ej99f/1/
var myapp = angular.module('myapp', ['ui.sortable']);
myapp.controller('controller', function ($scope) {
$scope.list = ["1", "2", "3", "4", "5", "6"];
$scope.list2 = ["7", "8", "9"];
$scope.sortableOptions = {
update: function(e, ui) {
if (Number(ui.item.text()) === 6) {
ui.item.parent().sortable('cancel');
}
},
receive: function(e, ui) {
ui.sender.sortable('cancel');
ui.item.parent().sortable('cancel');
},
connectWith: ".group",
axis: 'y'
};
});
angular.bootstrap(document, ['myapp']);
Any help would be gratefully appreciated.
well, when it comes to angular, all roads lead to the data "the single source of truth". So update your model back to it's original state, before the move, and you're all set :)
example below has two lists, the first one being restricted for
its sorting (the update method)
and for sending an item (receive method on list 2)
the second list you can sort, and send items to list 1
(using foundation4 for css)
<div ng-app="test">
<div ng-controller="sortableTest">
<div class="small-4 columns panel">
<ul data-drop="true"
ui-sortable="sortable.options.list1" ng-model="sortable.model.list1">
<li ng-repeat="fruit in sortable.model.list1"
data-id="{{ fruit.id }}">{{ fruit.label }}</li>
</ul>
</div>
<div class="small-4 columns panel">
<ul data-drop="true"
ui-sortable="sortable.options.list2" ng-model="sortable.model.list2">
<li ng-repeat="element in sortable.model.list2"
data-id="{{ element.id }}">{{ element.label }}</li>
</ul>
</div>
<div class="clear"></div>
<br />
<span ng-repeat="fruit in sortable.model.list1">{{ fruit.label }} </span><br />
<span ng-repeat="element in sortable.model.list2">{{ element.label }} </span><br />
<span ng-repeat="fruit in sortable.oldData.list1">{{ fruit.label }} </span><br />
<span ng-repeat="element in sortable.oldData.list2">{{ element.label }} </span><br />
</div>
</div>
js:
var test = angular.module('test', ['ui.sortable']);
test.controller('sortableTest', function($scope, $timeout) {
$scope.sortable = {
model: {
list1: [{id: 1, label: 'apple'},{id: 2, label: 'orange'},{id: 3, label: 'pear'},{id: 4, label: 'banana'}],
list2: [{id: 5, label: 'earth'},{id: 6, label: 'wind'},{id: 7, label: 'fire'},{id: 8, label: 'water'}]
},
oldData: {
list1: [],
list2: []
},
options: {
list1: {
update: function(event, ui) {
console.debug('up-list1');
$scope.sortable.oldData.list1 = $scope.sortable.model.list1.slice(0);
$scope.sortable.oldData.list2 = $scope.sortable.model.list2.slice(0);
// DO NOT USE THIS! it messes up the data.
// ui.item.parent().sortable('cancel'); // <--- BUGGY!
// uncomment and check the span repeats..
$timeout(function(){
$scope.sortable.model.list1 = $scope.sortable.oldData.list1;
$scope.sortable.model.list2 = $scope.sortable.oldData.list2;
});
},
connectWith: 'ul'
},
list2: {
update: function(event, ui) {
console.debug('up-list2');
},
connectWith: 'ul',
receive: function(event, ui) {
console.debug('re-list2');
$timeout(function(){
$scope.sortable.model.list1 = $scope.sortable.oldData.list1;
$scope.sortable.model.list2 = $scope.sortable.oldData.list2;
});
}
}
}
};
});
you can of course use a service or something to store the old value. One can use ui.sender to differentiate the senders, if you have more that two..