HTML script
<div>
<select ng-model="selectView">
<option value="empTable.html">Table View</option>
<option value="empList.html">List View</option>
</select>
<div ng-include="selectView"></div>
</div>
Angular script
var angScript = angular.module("multiselectapp",[]). controller ("multicontroller", function ($scope){
var empList = [
{ name:"sue", gender:"female" },
{ name:"Joe", gender:"male" }
];
$scope.employees =empList;
$scope. selectView ="empTable.html";
});
The empTable.html and empList.html has basic HTML script using ng-repeat to display the table and list view.
The angular script file is loaded and all paths are good to go having cross verified them with a $scope.message="file detected in html“ message which is displayed on HTML page.
But the table and list is not displayed at all.
Suggestions please!
Ng-include=" '{{selectedView}}' "
if its not gonna work try removing {{}}
Try out
<div ng-include src="selectView"></div>
It seems it works for me:
https://embed.plnkr.co/wFaG4m?p=preview
<body ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items"></select>
<div ng-include="selectedItem.name"></div>
</body>
var app = angular.module('plunker', []);
Js:
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.selectedItem = { name: 'a.html'};
$scope.items = [{name: 'c.html'},{ name: 'a.html'}];
});
$scope. selectView ="empTable.html";
Here unnecessary space is there between $scope and the variable name. Try removing space as below $scope.selectView ="empTable.html";
Related
I have a drop-down with some country code and its fullname in the option dropdown box.
(Like Below)
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["US-United state of America", "IN-India", "UK-United Kingdom"];
});
</script>
and my html Part is
<select ng-model="selectedName" ng-options="x for x in names"></select>
Ok, so what I want to do is, when I select any dropdown value in the dropdown, It should be entered only "US" without its fullname.
And when I saved this data into database, I am saving "US" only from webservice call, but In UI part I need to manage these things and when I edit this record only "US" should be selected in Dropdown not "US-United state of America".
I know this is weird requirement, but we need to do this :(
You can split the value in the dropdown to remove the part after hyphen - . Your names array will stay the same and you don't have to write any javascript.
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope) {
$scope.names = ["US-United state of America", "IN-India", "UK-United Kingdom"];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="selectedName1" ng-options="x.split('-')[0] as x.split('-')[0] for x in names"></select> {{selectedName1}}
<select ng-model="selectedName2" ng-options="x as x.split('-')[0] for x in names"></select> {{selectedName2}}
</div>
</div>
Use a filter
Template:
<select
ng-model="selectedName"
ng-change="stripCountryName(x)"
ng-options="x | stripCountryName for x in names">
</select>
Filter:
app.filter('stripCountryName', function() {
return function(name) {
return name.split('-')[0];
};
});
You can also use this filter to modify the outcome after selecting an option by injecting it into your controller:
app.controller('myCtrl', function($scope, stripCountryNameFilter) {
$scope.stripCountryName = (option) => {
$scope.selectedName = stripCountryNameFilter(option);
}
})
This way, your original $scope.names will always stay intact.
country names displaying using select box, select option coming from external json file. Based on selected country i am loading state json file into another select box,till every thing is ok, Now I need set Default selected country as INDIA, I tried bellow code.
html
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<select id="country" ng-init="state1 = options['IN']" style="width:250px;" class="" name="selectFranchise" ng-model="state1" ng-change="displayState(state1)">
<option ng-repeat="(key,country) in countries" value="{{key}}">{{country[0]}}</option>
</select>
</div>{{countries}}{{state1}}
<div>
<select id="state" ng-model="cities">
<option ng-repeat="(state,city) in states[state1]" value="{{city}}">{{city}}</option>
</select>
</div>
</div>
script
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.states = {
"IN":[
"Delhi",
"Goa",
"Gujarat",
"Himachal Pradesh",
]
};
$scope.countries = {
IN: ["India"],
ZA: ["South Africa"],
AT: ["Austria"]
}
$scope.lastName = "Doe";
});
jsfiddle
Add this in the controller after defining your $scope.countries
$scope.state1 = Object.keys($scope.countries)[0];
Remove ng-init from Html page.
I was trying simple select drop down in my app. Where I have set a default value in ng-model. But on load the drop down does not select the ng-model value.
Below are my codes:
HTML:
View <select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>3</option><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select> records at a time.
Js:
$scope.viewby=3
$scope.setItemsPerPage = function(num) {
console.log( num);
}
Here ng-change is working perfectly.
Here '3' should be selected on load. I tried ng-init and selected='selected' also and both are not working. Any suggestion will help.--thanks
Try like below snippet. Here default selected option was 20, you can change it to your need.
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.selectedOption = 20;
$scope.setItemsPerPage = function(num) {
console.log(num);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
View
<select ng-model="selectedOption" ng-change="setItemsPerPage(selectedOption)">
<option>3</option>
<option>5</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</select>
records at a time.
</div>
</div>
In angular, Better way is to define the options as array and bind them, so that ng-model will get updated.
JS:
$scope.model = 30;
$scope.options = [10, 20, 30,40,50];
HTML
<select ng-change="setItemsPerPage(model)" ng-model="model" ng-options="value for value in options"></select>
DEMO
i am making dropdown list with input field in angular.js but got no success
the code which i using..
<div ng-app="" ng-controller="namesCtrl">
<h2>filter input</h2>
<input type="text" ng-model="test"/>
<ul>
<li ng-repeat="x in names | filter:test | orderBy : 'name'">
{{ x.name + ',' + x.country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "";
$scope.lastName= "";
});
</script>
<script src="namescontrol.js"></script>
Check the working demo: JSFiddle.
Use a customized filter to perform the filtering. Since ng-model binds to the value key. Whenever key is changed, the items will be filtered and the view will be changed.
angular.module('Joy',[])
.controller('JoyCtrl', ['$scope', function ($scope) {
$scope.items = ['one', 'two', 'three', 'four', 'five'];
$scope.key = '';
$scope.search = function (value) {
return value.indexOf($scope.key) >= 0;
}
}]);
HTML:
<div ng-app="Joy" ng-controller="JoyCtrl">
<input type="text" ng-model="key">
<div>
<li ng-repeat="item in (items | filter:search)" ng-bind="item"></li>
</div>
</div>
Update 1
If you want to hide the list initially: JSFiddle:
$scope.search = function (value) {
return $scope.key !== '' && value.indexOf($scope.key) >= 0;
};
Update 2
I have developed an open source project angular-sui based on Angular and Semantic-UI. There is a directive sui-select, which is exactly what you want. Please check the Demo.
I think what you are looking for is autocomplete functionality. AngularUI offers this through their Typeahead directive. https://angular-ui.github.io/bootstrap/#/typeahead
You want to have something like this:
<input type="text" ng-model="test" typeahead="name for name in names"/>
The directive will dynamically generate the list so you don't need to create that explicitly yourself.
I'm using .net mvc3 application with angular js. In my view i'm trying to create the input field with ng-model property. Suppose if i have the following code, how i have to add ng-model attribute?
#foreach(var item in Model.ListItem)
{
<input type="text" value="item.name" name="Model.ListItem[count].name" ng-model="???"/>
}
Please help me with this.
I don't like the idea of meshing with backend template, but this should work:
<script>
angular.module("YourApp", [])
.controller("YourController", function($scope) {
$scope.list = [];
#foreach(var item in Model.ListItem)
{
$scope.list.push({
name: "#item.name"
// add other properties if you like
});
}
});
</script>
<div ng-app="YourApp">
<div ng-controller="YourController">
<input ng-repeat="item in list" type="text" name="{{item.name}}" ng-model="item"/>
</div>
</div>