I'm trying to select multiple value at a time using ui-select2 and for this i have added some angular-js script like
<link rel="stylesheet" href="<?php echo base_url(); ?>angular-js/bower_components/select2/select2.css">
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/select2/select2.js"></script>
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/angular-ui-select2/src/select2.js"></script>
and html code
<select multiple="multiple" ui-select2 ng-model="submitAdsFormData.city_id" ng-init="get_city_by_search()" style="width:300px" required>
<option value="{{x.name}}" ng-repeat ="x in searchResult">{{x.name}}</option>
</select>
For example, i want this type of select
https://jsfiddle.net/NathanFriend/rLmztr2d/ but in angularjs.
But not getting selected multiple value.can anyone help me to get this.
Thanks in advance.
for this you need to pass a JSON setup to ui-select2 like
<select multiple="multiple" ui-select2="multiSetup" ng-model="submitAdsFormData.city_id" ng-init="get_city_by_search()" style="width:300px" required>
<option value="{{x.name}}" ng-repeat ="x in searchResult">{{x.name}}</option>
</select>
and in a controller
$scope.searchResult = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.multiSetup = {
multiple: true,
formatSearching: 'Searching the group...',
formatNoMatches: 'No group found'
};
working plunker.
Related
I would like to update the list of states on selection of country. I have researched a bit into this where it was recommended to use $parent as ng-if does not work on controller scope.But that too is not working for me.
Can someone please help me understand how to get the values into state select control.
Also I would also like to know what if there are multiple ng-if in my HTML. (again nested $parent.$parent.$parent... is not working)
Plunker Link : Plunker Link
"use strict";
var app = angular.module("app", []);
function CountriesController($scope) {
$scope.condition = true;
$scope.countries = [{
"name": "USA",
"id": 1
},{
"name": "Canada",
"id": 2
}];
$scope.states = [{
"name": "Alabama",
"id": 1,
"countryId": 1
}, {
"name": "Alaska",
"id": 2,
"countryId": 1
}, {
"name": "Arizona",
"id": 3,
"countryId": 1
}, {
"name": "Alberta",
"id": 4,
"countryId": 2
}, {
"name": "British columbia",
"id": 5,
"countryId": 2
}];
$scope.updateCountry = function(){
$scope.availableStates = [];
angular.forEach($scope.states, function(value){
if(value.countryId == $scope.country.id){
$scope.availableStates.push(value);
}
});
}
}
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="CountriesController">
<div ng-if="condition">
<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()">
<option value="">Select country</option>
</select>
<br>
<select data-ng-model="state" data-ng-options="state.name for state in availableStates">
<option value="">Select state</option>
</select>
<br> Country: {{country}}
<br> State: {{state}}
</div>
</body>
</html>
Instead of making a separate list, you can use your country list by filtering
filter: {countryId: $parent.country.id}
"use strict";
var app = angular.module("app", []);
function CountriesController($scope) {
$scope.condition = true;
$scope.countries = [{
"name": "USA",
"id": 1
},{
"name": "Canada",
"id": 2
}];
$scope.states = [{
"name": "Alabama",
"id": 1,
"countryId": 1
}, {
"name": "Alaska",
"id": 2,
"countryId": 1
}, {
"name": "Arizona",
"id": 3,
"countryId": 1
}, {
"name": "Alberta",
"id": 4,
"countryId": 2
}, {
"name": "British columbia",
"id": 5,
"countryId": 2
}];
$scope.updateCountry = function(){
$scope.availableStates = [];
angular.forEach($scope.states, function(value){
if(value.countryId == $scope.country.id){
$scope.availableStates.push(value);
}
});
}
}
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="CountriesController">
<div ng-if="condition">
<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="">
<option value="">Select country</option>
</select>
<br>
<select data-ng-model="state" data-ng-options="state.name for state in states | filter:{countryId: country.id}:true">
<option value="">Select state</option>
</select>
<br> Country: {{country}}
<br> State: {{state}}
</div>
</body>
</html>
Here is simplest way to init selected option:
for blank form, just init with option value that you want (don't forget the double single quotes)
<select ng-model="$ctrl.data.userlevel" ng-init="$ctrl.data.userlevel='0'">
<option value="0">User</option>
<option value="1">Admin</option>
</select>
for loaded data form, just init using that loaded model data, like below:
<select ng-model="$ctrl.data.userlevel" ng-init="$ctrl.data.userlevel=''+$ctrl.data.userlevel">
<option value="0">User</option>
<option value="1">Admin</option>
</select>
i think, init value should be string. so they need to concat with double single quotes.
Question: How do you clear a dynamically created ng-repeat AngularJS form field? If you can find a place I didn't look for the answer to this, I'd be surprised.
Background: I have AngularJS pulling JSON through a Service into my controller. I then use scope to ng-repeat labels for a form. I am having trouble clearing the fields. Since words don't accurately tell you what I am doing here is the basic code setup. I hacked it down to a few lines.
I've tried the old $scope.formName.inputName=""; and $scope.inputName="";, but they don't work. Any ideas or a direction to go?
http://plnkr.co/edit/BtID7a8EnyxuxClwdHkS?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
<form name="formName" id="formName" style="width: 320px">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div style="float:left;">
<input name="forminput" ng-model="forminput" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" style="float:left;" ng-click="clearMe()">Clear</button>
</form>
</body>
</html>
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
$scope.forminput = "";
};
});
You are repeating a single ngmodel="forminput" use unique for each by making forinput an object and creating unique models with keys ng-model="forminput[item.desc]"
first in your controller
$scope.forminput = {};
then in view, change input as
Demo:
// Code goes here
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.forminput = {};
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
console.log("herleme")
$scope.forminput = {};
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="AppTest as app">
<h1>Hello Plunker!</h1>
<form name="formName" id="formName">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div > <input name="forminput[item.desc]" ng-model="forminput[item.desc]" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" ng-click="clearMe()">Clear</button>
</form>
</body>
<input name="forminput[item.desc]"
ng-model="forminput[item.desc]"
style="width:200px" type="text" value=""/>
and clearing it as
$scope.clearMe = function (){
console.log("herleme")
$scope.forminput = {};
};
If I understand, you want to clear all fields in the form on clicking the 'clear' button?
Here's a working version:
http://plnkr.co/edit/f0QSDKH7qkM8CcZRU5Js?p=preview
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
for(var i = 0; i < $scope.currentInfo.attribute.length; i++) {
$scope.currentInfo.attribute[i].forminput = '';
}
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
<h1>Hello Plunker!</h1>
<form name="formName" id="formName">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div style="float:left;"> <input name="forminput" ng-model="item.forminput" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" ng-click="clearMe()">Clear</button>
</form>
</body>
</html>
I've used the currentInfo model itself to bind the value of the inputs. This means they'll be available outside of the scope of the ng-repeat. Then the clear function iterates through each item in the 'attributes' array and sets the value to empty string.
You were on the right path, but with slight bug. All of the generated forms were bind to same model - forminput. You have to generate model binding dynamically.
<input name="forminput" ng-model="formmodel[item.name]"/>
and in the controller
$scope.formmodel = {};
check out the plunkr
Also, for generated forms check out projects as autofields, no need to reinvent the wheel.
I have following JSON with answers:
And i want to submit this to database only one of the answer can have "IS_CORRECT" flag with value "Y:
"Answers": [
{ "ANSWER_ID": 5, "DESCRIPTION": "Answer 3", "IS_CORRECT": "N" },
{ "ANSWER_ID": 4, "DESCRIPTION": "Answer 2", "IS_CORRECT": N },
{ "ANSWER_ID": 3, "DESCRIPTION": "Answer 1", "IS_CORRECT": "N" }
]
In my html i use ng-repeat to loop over my answers and i create a radio button for each.
<div class="control-group" ng-repeat="answer in Answers>
<input type="radio" ng-model="answer.IS_CORRECT" value="Y" name="answer"/>
</div>
My problem is that when i check Answer_id 5 as correct it updates "IS_CORRECT" field from my model to "Y" but it does not update AnsWer 4 and 3 "IS_CORRECT to 'N'.
Can you please give me some suggestions
You are using radio buttons as checkboxes. Better approach is to save current value:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body ng-app="testApp">
<div ng-controller="controller">
<div class="control-group" ng-repeat="answer in answers">
<label>
{{answer.DESCRIPTION}}
<input type="radio" ng-model="$parent.correctAnswer" ng-value="answer" name="correct_answer">
</label>
</div>
Correct Answer: {{correctAnswer.DESCRIPTION}}
</div>
</body>
<script>
var app = angular.module('testApp', []);
app.controller('controller', function($scope) {
$scope.answers = [
{ "ANSWER_ID": 5, "DESCRIPTION": "Answer 3"},
{ "ANSWER_ID": 4, "DESCRIPTION": "Answer 2"},
{ "ANSWER_ID": 3, "DESCRIPTION": "Answer 1"}
];
$scope.correctAnswer = $scope.answers[1];
});
</script>
</html>
I am using select2 with angularjs for select boxes in my application. There is one parent select box where user can select multiple groups and there are many other child select boxes with the same group selection feature.
My problem is how to restrict child group search options according to
parent group selected option. i.e. say if parent groups are Group1,
Group2, Group3 then the child group search box should avail the
options selected in parent groups only.
HTML:
<body ng-app="myModule">
<div ng-controller="myCtrl">
<div ng-repeat="activity in activities">
<br><br><br><br>
<div>
Parent Group:
<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group">
<option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>
<p>selected parent groups {{activity.act_group_id}}</p>
</div>
<br><br>
<div>
Child Group:
<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group">
<option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>
<p>selected child group {{activity.act_auto_approve_group}}</p>
</div>
</div>
</div>
</body>
JS:
var activityModule = angular.module('myModule', ['ui']);
activityModule.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.activities = [{"act_name": "activity1", "act_group_id": "62,68", "act_auto_approve_group": "62"}];
$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.groupSetup = {
multiple: true,
formatSearching: 'Searching the group...',
formatNoMatches: 'No group found'
};
// custom function to convert string into attay (string arra or integer array)
$scope.split_custom = function(string, spliter, is_integer) {
$scope.ret_arr = string.split(spliter); // convert string into array
if (is_integer==1)
$scope.ret_arr = $scope.ret_arr.map(Number); // convert string array into integer array
return $scope.ret_arr;
};
}]);
http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview
After 6 hours struggle, I was able to achieve this using ng-change event in a tricky way:
HTML :
1.Parent select box:
<select ng-change="parent_group_changed(activity)" multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group" >
<option ng-repeat="group in groups" value="{{group.id}}">{{group.text}}</option>
</select>
2.Child select box:
<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group">
<option ng-repeat="group in activity.act_groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>
JS
$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.groups2 = $scope.groups;
$scope.groupSetup = {
multiple: true,
formatSearching: 'Searching the group...',
formatNoMatches: 'No group found'
};
$scope.parent_group_changed = function(activity) {
activity.act_groups=[];
for(var i=0; i<activity.act_group_id.length; i++)
{
var x = activity.act_group_id[i];
activity.act_groups.push($filter('filter')($scope.groups2, {id:x})[0]);
}
};
Plunker
http://plnkr.co/edit/07Uj8EdDlAyT54AkuaRQ?p=info
Since days im trying to get this running: With the following snippet i want to filter some persons and after onchange was fired receive the objects which have been filtered. see this Code live here: http://jsbin.com/isojof/1/
Any idea?
There is noch $filter Object yet...but how to create one? $filter('filter') is obviously not working!
<html ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body ng-controller="List">
Search: <input ng-change="getData(names, query)" ng-model="query">
Search: <select ng-change="getData(names, query2)" ng-model="query2">
<option></option>
<option>Berlin</option>
<option>Hamburg</option>
</select>
<div>
<ul class="names" >
<li ng-model="item" " ng-repeat="name in names | filter:query | filter:query2">
{{name.firstname}}, {{name.lastname}}, {{name.age}}, {{name.location}}
</li>
</ul>
</div>
<script type="text/javascript">
function List($scope) {
$scope.names = [
{"firstname": "Carl",
"lastname": "Luyk",
"age": 20,
"location":"Berlin"},
{"firstname": "Carl",
"lastname": "Moreen",
"age": 20,
"location":"Hamburg"},
{"firstname": "Tom",
"lastname": "Luyk",
"age": 25,
"location":"New York"},
{"firstname": "Caren",
"lastname": "Tilt",
"age": 20,
"location":"Paris"},
{"firstname": "Caren",
"lastname": "Orail",
"age": 30,
"location":"Hamburg"},
];
$scope.getData = function (names, query) {
$scope.queryData = $filter('filter')(names, query);
console.log($scope.queryData);
};
}
</script>
</body>
</html>
You just need to inject $filter into your controller:
Change
function List($scope) {
to
function List($scope, $filter) {
http://jsbin.com/isojof/2/