I am trying to populate a multiple select option using Angular JS . This is my List
var depositoryList =[
{
"depos":"Any",
"deposName":"Any"
},
{
"depos":"DUB",
"deposName":"DUBAI"
},
{
"depos":"MUM",
"deposName":"MUMBAI"
},
{
"depos":"SNG",
"deposName":"SINGAPORE"
}],
// didnt Work
$scope.depositoryId = {value:{depos:'Any'}}
This is how i populate it in HTML
<select multiple
ng-model="depositoryId.value"
data-ng-options="obj.depos + ' - ' + obj.deposName for obj in depositoryList track by obj.depos">
</select>
1)I tried to set default value to Any and i am not able set them .
2) I tried to get the selected value and did alert($scope.depositoryId.value.depos) . Its giving me an undefined alert message
where am i going wrong
Final Edit:
Show Any- Any without any break and get selected values in ng-model
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.depositoryId = ['Any'];
$scope.depositoryList =[
{
"depos":"Any",
"deposName":"Any"
},
{
"depos":"DUB",
"deposName":"DUBAI"
},
{
"depos":"MUM",
"deposName":"MUMBAI"
},
{
"depos":"SNG",
"deposName":"SINGAPORE"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<body ng-controller="MainCtrl">
<select multiple="true" ng-model="depositoryId" ng-options="obj.depos as (obj.depos + ' - ' +obj.deposName) for obj in depositoryList">
</select>
<div>{{depositoryId}}</div>
</body>
</html>
For a more elegant solution without hardcoding the initial value, since you have the string needed in your array, you could do:
<select multiple='true' ng-init="depositoryInitialValue = depositoryList[0].deposName"
ng-model="depositoryInitialValue"
ng-options="obj.depos as (obj.depos + ' - ' + obj.deposName) for obj in depositoryList">
</select>
See plunkr here
hope it helps.
var app = angular.module('ngApp', []);
app.controller('MainCtrl', ['$scope', function($scope) {
'use strict';
$scope.depositoryList = [{
"depos": "Any",
"deposName": "Any"
}, {
"depos": "DUB",
"deposName": "DUBAI"
}, {
"depos": "MUM",
"deposName": "MUMBAI"
}, {
"depos": "SNG",
"deposName": "SINGAPORE"
}]
}]);
<!DOCTYPE html>
<html ng-app="ngApp">
<head lang="en">
<meta charset="utf-8">
<title>maxisam's ngApp</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
<body ng-controller="MainCtrl" class="container">
<br/>
<select multiple='true' ng-init="depositoryInitialValue = depositoryList[0].deposName" ng-model="depositoryInitialValue" ng-options="obj.depos as (obj.depos + ' - ' + obj.deposName) for obj in depositoryList">
</select>
<br /> {{depositoryInitialValue}}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Related
On Check/Uncheck of the CheckBox , I am trying to add Or Remove the Corresponding HTML
dynamically
On Click of the One Checkbox i want to add
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('One'<br/>');
and on Click of the Two Checkbox i want to add along with One
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('Two<br/>');
I have tried as shown in below HTML ,On Uncheck but i am unable to Remove HTML
http://jsfiddle.net/9fR23/464/
Why not just use ng-repeat again to print out the values pushed in your $scope.selectedNames array?
By nature of having your repeated element be a <div> you get the line break for free. But, you could also do just as easily do <span ng-repeat="n in selectedNames">{{n}}<br /></span>
var app = angular.module('plunker', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["One", "Two", "Three"];
$scope.selectedNames = [];
$scope.select = function(name) {
var index = $scope.selectedNames.indexOf(name);
if (index < 0) {
$scope.selectedNames.push(name);
var myEl = angular.element(document.querySelector('#divID'));
myEl.prepend('' + name + '<br/>');
} else
$scope.selectedNames.splice(index, 1);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)" />{{n}}
</div>
<div ng-repeat="n in selectedNames">{{n}}</div>
</body>
</html>
Mirror on Plunker: http://plnkr.co/edit/pAIpY4qZpT4SvLgCaYIy?p=preview
In the following code taken from my app, the dropdown is not getting updated with the scope data. How can I make this work? I need to pass the dropdown options from parent controller to child controller. I am getting [$injector:modulerr] error.
<div ng-app="myApp" ng-controller="parentCtrl as pt">
<button ng-click="pt.callChild()">Change Dropdown</button>
<div ng-controller="childCtrl as ct">
<select ng-model="ct.selectedName" ng-options="item for item in ct.names">
</select>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.controller('parentCtrl', function ($scope) {
var vm = this;
var newArray = ["Steve", "Jony"];
vm.callChild = function () {
$scope.$broadcast('someEvent', newArray);
};
});
app.controller('childCtrl', function ($scope) {
var vm = this;
vm.names = ["Emil", "Tobias", "Linus"];
$scope.$on('someEvent', function (e, newArray) {
vm.names = newArray;
});
});
Here is the fiddle.
The code is working fine for me and I have incorporated angular 1.5 version.
See plnkr here .
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<div ng-app="myApp" ng-controller="parentCtrl as pt">
<button ng-click="pt.callChild()">Change Dropdown</button>
<div ng-controller="childCtrl as ct">
<select ng-model="ct.selectedName" ng-options="item for item in ct.names">
</select>
</div>
</div>
</html>
Quite straightforward, but I am fairly new to angular, and I think I have bitwise-sick, so I am kinda stuck :
// Checkboxes control existence of value in an array
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.bitMaskFromDB = 5;
$scope.fruits = [{value:1, label: 'apple'}, {value:2, label:'orange'}, {value:4, label:'pear'}, {value:8, label:'naartjie'}];
});
app.directive('bitMask', function() {
return {
scope: {
bitMask: '=',
value: '#'
},
link: function(scope, elem, attrs ) {
var handler = function(setup) {
if (setup){
var checked = scope.bitMask&scope.value;
elem.prop('checked', checked);
}else{
var checked = elem.prop('checked');
if (!scope.bitMask&scope.value)
scope.bitMask |= scope.value
// elem.prop('checked', !checked);
scope.bitMask ^= scope.value
}
console.log ('bit = '+ scope.bitMask)
// console.log ('value = '+ scope.value)
// console.log ('checked ='+ checked)
};
var setupHandler = handler.bind(null, true);
var changeHandler = handler.bind(null, false);
elem.on('change', function() {
scope.$apply(changeHandler);
});
scope.$watch('bitMask', setupHandler, true);
}
};
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller='MainController'>
Bitmask checkboxes <br>
<span ng-repeat="fruit in fruits">
<input type='checkbox' value="{{fruit.value}}" bit-mask='bitMaskFromDB' > {{fruit.label}}<br />
</span>
<div>Current value of bitmask: {{bitMaskFromDB }}</div>
</body>
</html>
I failed to
1/ change the bit mask value correctly to checkbox values and
2/ show/bind value back to controller
http://plnkr.co/edit/3M8KNyOxMBgPwj9jf01q
You are very close my friend.
Here is the fix for you. Well, I don't really remember what they said about that. But there are weird behavior binding primitive to scope
updated your plkr
// Checkboxes control existence of value in an array
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.IforgetHowTheyExplainThis = {bitMaskFromDB:5};
$scope.fruits = [{value:1, label: 'apple'}, {value:2, label:'orange'}, {value:4, label:'pear'}, {value:8, label:'naartjie'}];
});
app.directive('bitMask', function() {
return {
scope: {
bitMask: '=',
value: '#'
},
link: function(scope, elem, attrs ) {
var handler = function(setup) {
if (setup){
console.log ('value1 = '+ scope.value)
var checked = scope.bitMask&scope.value;
elem.prop('checked', checked);
}else{
console.log ('value2 = '+ scope.value)
var checked = elem.prop('checked');
if (!scope.bitMask&scope.value)
scope.bitMask |= scope.value
else
scope.bitMask ^= scope.value
}
console.log ('bit = '+ scope.bitMask)
// console.log ('value = '+ scope.value)
// console.log ('checked ='+ checked)
};
var setupHandler = handler.bind(null, true);
var changeHandler = handler.bind(null, false);
elem.on('change', function() {
scope.$apply(changeHandler);
});
scope.$watch('bitMask', setupHandler, true);
}
};
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller='MainController'>
Bitmask checkboxes <br>
<span ng-repeat="fruit in fruits">
<input type='checkbox' value="{{fruit.value}}" bit-mask='IforgetHowTheyExplainThis.bitMaskFromDB' > {{fruit.label}}<br />
</span>
<div>Current value of bitmask: {{IforgetHowTheyExplainThis.bitMaskFromDB }}</div>
</body>
</html>
I am a newbie to the AngularJS World. I have this example to define a controller for AngularJS page. I ended up displaying the raw text in the browser when tried to open the page.
I am trying with downloading the angular.js (lib/angular.js) to local filesystem.
The page is as given below:
<!doctype html>
<html ng-app>
<head>
<script src="lib/angular.js"></script>
<script type="text/javascript">
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
</script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{clock}}!</h1>
</div>
</body>
</html>
I ended up getting the result as below:
Hello {{clock}}!
In the browser console, I am getting the error log as follows:
Error: [ng:areq] Argument 'MyController' is not a function, got undefined
What am I missing?
Best Regards,
Chandra.
You need to initiate an angular module and create a controller using the same.
For Example:
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
And then you need to specify the app in the html markup with ng-app="myApp"
So your html will be:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{clock}}!</h1>
</div>
</body>
</html>
Working Plunkr
Hello I'm started to learn AngrularJS from strach and I have problem with basic two modules and basic filter:
<body ng-app="myapp">
<div ng-controller="MyController" >
{{1+1}}
<div>Filtered: {{myData.text | myFilter:2:5}}</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.text = "balsalaskdlas";
});
angular.module("myapp", []).filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>
</body>
But this code gives me error : "Argument 'MyController' is not a function, got undefined"
And in HTML browser as page I saw:
{{1+1}}
Filtered: {{myData.text | myFilter:2:5}}
What is wrong with these code?
angular.module("myapp", [])
The above line defines a new module, named "myapp", and overwrite the previously defined module. If you want to get a reference to the module and add a filter to it, use
angular.module("myapp").filter(...)
You're declaring the module twice and you are missing an ending in the ng-controller-div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
{{1+1}}
<div>Filtered: {{myData.text | myFilter:2:5}}</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.text = "balsalaskdlas";
});
app.filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>
</body>
</html>