In this codepen I'm attemptling to load a option element from a scoped variable :
<html>
<head>
<title>AngularJS test</title>
</head>
<body ng-app ng-controller="TestCtrl">
<select ng-init="vendor = vendors[0]" ng-model="vendor" ng-options="vendorName as vendor.name for vendorName in vendors"></select>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>
function TestCtrl($scope) {
$scope.vendors = [{
name: 'Oracle1',
name: 'Oracle2'
}];
}
But just the element at position[1] is being loaded.
CodePen : http://codepen.io/anon/pen/OVbXJV?editors=101
Why is just 1 option element being loaded ?
You should have an array of objects not just one object containing multiple names.
$scope.vendors = [
{name: 'Oracle1'},
{name: 'Oracle2'}
];
You can then use ng-options like so:
ng-options="vendor.name for vendor in vendors"
Related
index.html
test.json
I want to be able to dynamically filter by the user clicking the button repersenting who's specific phone number they would like to see instead of using "filter: {Name: 'Bob'}" only showing Bobs info but I have not been able to find a way to use a variable in place of 'Bob'. I have provided the code in images.
Plunker was right in how I use a variable in my filter, I just did what Shb said in the comments as well so my buttons were out of scope and I just adjusted the tags ng-app and ng-controller to the body and Punkers solution to the filter works. Thanks guys something I should have easily seen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Try following code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Plunker
I have a ng-repeat iterates through an array and loads my select options, and one of the options is an empty string, but if i click in on the values the empty option disapears, im not sure why
this is my select
<select
class="form-control input-sm"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-readonly="itemForm.produtosempesobrutodefinido"
ng-required="!itemForm.produtosempesobrutodefinido">
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}" ng-selected="itemForm.grossweightmeasurementunitcode == unidadepeso.commoncode">{{unidadepeso.sigla}}</option>
</select>
i did a $scope.unidadespeso.push = ' '; to achieve the empty value, any ideas?
Add empty item to array.
Following example might help you.
Please comment if you have any doubts.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("myapp", []).controller('MainCtrl', ['$scope', function($scope) {
$scope.selectedItem = { name: 'two', id: 27 };
$scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];
var emptyItem = {name: '', id: '' };
$scope.items.unshift(emptyItem);
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myapp" 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 track by item.id"></select>
</body>
</html>
I create a controller that shows data in li using ng-repeat.
The data has a variable called filter and used for categorizing the data. Now I want to filter the li based on this variable and want to do it by using buttons.
But I don't know how to connect the filter to the data in the controller.
I create plunkr for it: plunkr
there is an in-built filter named 'filter' and it works perfectly for this
updated filter to be an object currentFilter, and defaulted currentFilter.filter to "app" which tells filter which property on the objects to filter on.
added the buttons and a tied them to a function on the scope that sets currentFilter.filter when they are clicked
updated ng-repeat to use the 'currentFilter' and set strict to true so it matches the word exactly. By default strict is false and works like a predicate.
angular docs: https://docs.angularjs.org/api/ng/filter/filter#example
var app = angular.module('plunker', []);
app
.controller('isotopeCtrl', isotopeFunction);
function isotopeFunction($scope) {
$scope.names = ['website-1', 'website-2', 'app-1', 'psd-1', 'psd-2', 'psd-3'];
$scope.currentFilter = {
filter: 'app'
};
$scope.data = [{
name: 'website-1',
filter: 'website'
},
{
name: 'website-2',
filter: 'website'
},
{
name: 'app-1',
filter: 'app'
}
];
$scope.setFilter = function(filter) {
$scope.currentFilter.filter = filter;
};
console.log($scope.names);
}
<!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="isotopeCtrl">
<h2>Simple Data</h2>
<ul>
<li ng-repeat="item in data">
<div>{{ item.name }}</div>
</li>
</ul>
<h2>Using Filter</h2>
<p>Here I used a dynamic filter - {{ currentFilter.filter }} )</p>
<ul>
<li ng-repeat="item in data | filter:currentFilter:true">
<div>{{ item.name }}</div>
</li>
</ul>
Filters
<button ng-click="setFilter('app')">app</button>
<button ng-click="setFilter('website')">website</button>
</body>
</html>
I am trying to fetch 2 different ids from ng-options object list and map the same into select model on user select. The model is mapped properly but the value is not shown on select box.
http://plnkr.co/edit/Z3ohLie4vpTvXhUiLfl6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Select something</h1>
<select ng-model="selectedItem" ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items"></select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>
</body>
</html>
The Javascript:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo', anotherId: 11 },
{ id: 2, name: 'bar', anotherId: 22 },
{ id: 3, name: 'blah', anotherId: 33 }];
});
You are using a very old version of Angular. If you can use a fairly recent version, the answer is using the track by clause of ng-options:
<select ng-model="selectedItem"
ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items track by item.id"></select>
Forked plunk: http://plnkr.co/edit/0SwHfYVuYd5iIA9P4mpU?p=preview
I have a select list created with ng-repeat and not ng-options. The issue I have is that there is an extra blank list item that disappears as soon as the user change the value.
The answer to AngularJS - extra blank option added using ng-repeat in select tag mentions that the selected item should be initialized to avoid that issue. I did it but I still have a blank entry.
HTML:
<select ng-model="selectedLanguage">
<option ng-repeat="language in languages" value="{{language}}" ng-selected="selectedLanguage == language">{{language.name}}</option>
</select>
<h2>{{selectedLanguage}}</h2>
Controller:
app.controller('Ctrl', function($scope) {
$scope.languages = [{ name: "English", key: 'en' }, { name: "French", key: 'fr'}];
$scope.selectedLanguage = $scope.languages[0];
});
The Plunker
You should use ng-options I updated your plunkr
http://plnkr.co/edit/Iz7wFfG9l6wmQ50w2RpP
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.1" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<h1>Hello Plunker!</h1>
<select ng-model="selectedLanguage" ng-options="language.name | uppercase for language in languages">
</select>
<h2>{{selectedLanguage}}</h2>
</body>
</html>
JS (no changes)
// Code goes here
var app = angular.module("app", []);
app.controller('Ctrl', function($scope) {
$scope.languages = [{ name: "English", key: 'en' }, { name: "French", key: 'fr'}];
$scope.selectedLanguage = $scope.languages[0];
});