How do I dynamically make options selected using ng-repeat in a select element?
Here is an example of what I am trying to achieve and the results I've gotten with my approach.
https://plnkr.co/edit/xOkNzalcw1DlJ7PU?open=lib%2Fscript.js&deferRun=1&preview
HTML
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.name = 'World';
$scope.options = [
{
value: 'red',
selected: false,
},
{
value: 'blue',
selected: true,
},
];
});
<!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.0.x"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"
></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3>Via ng-repeat</h3>
<select multiple="yes">
<option ng-repeat="option in options" value="{{option.value}}" selected="{{option.selected}}">
{{option.value}} - option.selected = {{option.selected}}
</option>
</select>
<br />
<br />
<br />
<h3>Manual</h3>
<select multiple="yes">
<option value="red">red</option>
<option value="blue" selected>blue</option>
</select>
</body>
</html>
Related
i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 2}];
});
<!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.3.x" src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
http://plnkr.co/edit/knmWulxhKdeQoMVm7u4k?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-static-select-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="staticSelect">
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" ng-selected="v==4">Q{{v}}</option>
</select>
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==3">Q{{v}}</option>
</select>
</body>
</html>
ng-selected seems to be only selecting the last element. Why is this?
I have inspected the element and the ng-selected tag is true. However, if it is not the last element then it won't be selected initially.
you can try this code,
<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,4,3]">
in your controller you have to specify "Quarter", like :
$scope.Quarter = 3
Here is a full example:
(function(angular) {
'use strict';
angular.module('staticSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.Quarter = 3;
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-static-select-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>
<body ng-app="staticSelect" ng-controller="ExampleController">
<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,3,4]">
</body>
</html>
I'm trying to include select with data loaded from the json inside drawer. I use snap plugin. It works with hardcoded data but it doesn't work when i use dynamic data:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/angular-snap.css" />
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
<script src="js/snap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js"></script>
</head>
<body>
<snap-drawer>
<p ng-controller="RandCtrl">
Here's a big random number to show the drawer content
does not reload: <span>{{rand}}</span>
</p>
<select ng-model="correctlySelected"
ng-options="opt as opt.label for opt in options">
</select>
</snap-drawer>
<snap-content id="content">
<ng-view>aaaa</ng-view>
</snap-content>
</body>
</html>
This is my controller:
var app = angular.module('plunker', ['snap']);
app.controller('RandCtrl', function($scope) {
$scope.rand = Math.floor(Math.random() * 1000000);
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
$scope.correctlySelected = $scope.options[1];
});
ng-controller="RandCtrl" // put in body or in all code
plunker <body ng-controller="RandCtrl">
I have a template in which I have rows, and there are two elements in each row and each element has different classes so I have my Html structure like so (simplified)
<div ng-repeat "row in deals">
<div class="deal-title-left">{{row[0].title}}</div>
<div class="deal-title-right">{{row[1].title}}</div>
</div>
I would like to add a search box feature that will use live search to go through the deal titles. I have tried using the ng-model="search" and adding a search filter into the row div, but how do I apply the model to each individual deal instead of the entire row?
Demo :http://plnkr.co/edit/zGYLPcPHTr1TOSZTIBI2?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search"/>
<div ng-repeat="row in deals | filter :{title:search}">
<div class="deal-title-left">{{row.title}}</div>
</div>
</body>
</html>
JS:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.deals = [{
title: "Cola for free"
}, {
title: "Icecream for free"
}, {
title: "Tee for free"
},
]
});
How do I get $scope.animal to update when clicking the radio button?
http://plnkr.co/edit/5ikIYfXQw4GyjRKScD7x?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.animals = {
dog: {
label: "Dog"
},
cat: {
label: "Cat"
},
bird: {
label: 'Bird'
}
};
$scope.animal = 'dog';
});
HTML:
<!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.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="(key, val) in animals">
<label>
{{val.label}}
<input type="radio" name="animal" value="{{key}}" ng-model="animal">
</label>
</li>
</ul>
<p>Animal: {{animal}}</p>
</body>
</html>
When you click the radio button, it should say the name of the animal you just clicked on.
Because ngRepeat creates a different scope, you can either use $parent
<input type="radio" name="animal" value="{{key}}" ng-model="$parent.animal">
or use an object:
<input type="radio" name="animal" value="{{key}}" ng-model="animal.name">
Controller:
$scope.animal = {
name : "dog"
};