I was writing a code in html5 and angular js. I am encountering a problem in passing parameters with space. Here is my code :
angular.module('MyApp', [])
controller('MyCtrl', function($scope) {
$scope.validate = function(description,code) {
alert(description,code);
}
});
<!DOCTYPE html>
<html>
<body ng-app="MyApp">
<div ng-repeat="x in allItem.items" class="col-75" ng-controller="MyCtrl">
<a href="#" ng-click="validate({{x.itemDesc}},{{x.itemCode}})">
<div class="card item center">{{x.itemName}}
</div></a>
</div>
</body>
</html>
The JSON format is like this
Json contains
allItem
{
items
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
}
{
itemName: "Tomato",
itemDescr: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
}
I am not able to pass the parameters. I don't know how to pass the text that contains spaces and quotes('). Can anyone help me
Your Json needs to be an array, skip the href="#" and you do not need to bind within ng-click. The code below is fully functioning and running.
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.allItem =
{
items:[
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
},
{
itemName: "Tomato",
itemDesc: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
]
};
$scope.validate = function(description, code) {
console.log(description,'-', code);
};
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<br/>
<div ng-repeat="x in allItem.items" class="col-75">
<a ng-click="validate(x.itemDesc, x.itemCode)">
<div class="card item center">{{x.itemName}}
</div>
</a>
</div>
</body>
</html>
Related
I wants to catch parent name and id on child selection.
Output should be:
$scope.selected = [{"name": "Request1", "id":1,
"status":[{"name":"status1","isSelected":true},
{"name":"status2","isSelected":false}]
}]
Able to get selected child but respective parent not getting.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
]
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<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>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
You can utilize the $index for getting the parent name and id.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
var result = [];
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
];
$scope.getParent = function(index, selectedState){
result = [];
var req = {
"name": $scope.requests[index].name,
"id": $scope.requests[index].id,
"status": selectedState
}
result.push(req);
console.log("result",result);
return angular.toJson(result);
};
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<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>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-click="getParent($index, request.selectedStatus)" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
As shown below, in the controller.js, I have tried to use the { name: 'item' } style and it worked in the viewer.
However, I would like to pull the data from the SQL Database.
I tried using {{member.member_name}} but it didn't work.
$http.get('../crud/members_select.php').then(function(response){
$scope.members = response.data;
});
this.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
Thus, my question is "How can I do the {{member_name}} thing in order to repeat the data in a single code from SQL Database?"
Below is the HTML CODE.
<div class="ibox-content">
<select ng-options="name as member.member_name for n in members"
multiple
ng-model="selections"
bs-duallistbox></select>
</div>
Thank you in advance!!
You need to do it this way
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
$scope.selections = [];
}]);
</script>
<div ng-controller="ExampleController">
<label>Color (null not allowed):
<select ng-model="selections" ng-options="item.member_name for item in items" multiple></select>
</label>
<hr/>
Currently selected: {{ selections }}
</div>
</body>
</html>
When I click the checkbox, the $scope.$watchCollection('classes' does not fire. Any suggestions?
<div class="filter-column">
<div class="filter-title">Class</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-repeat="class in classes | orderBy">
<input type="checkbox"
ng-model="class.checked" >
{{class.description}}
</div>
</div>
</div>
$scope.$watchCollection('classes', function(newValue) {
console.log('sss')
});
To fixed your code, follow answer from #Sajeetharan for deep watch collection. But I think ng-change should be used in your case to capture event
<input type="checkbox" ng-model="class.checked" ng-change="chkChecked(class);"> {{class.description}}
You can have a deepwatch in that case,
$scope.$watch(function($scope) {
return $scope.classes.
map(function(obj) {
return obj.checked
});
}, function(newVal) {
$scope.checked = true;
alert("css chagned");
}, true);
DEMO
// Code goes here
angular
.module('myApp', [])
.controller('testController', ['$scope',
function($scope) {
$scope.classes = [{
description: 'label1',
}, {
description: 'label2',
}];
$scope.$watch('classes', function(newValue) {
console.log("watcher called");
}, true);
}
]);
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="testController">
<div class="filter-column">
<div class="filter-title">Class</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-repeat="class in classes | orderBy">
<input type="checkbox" ng-model="class.checked" ng-change="call(class)">{{class.description}}
</div>
</div>
</div>
</body>
</html>
$watch is able to get the changes.
I'm trying to output the name "Sam" on the screen in a ng-show using indexOf, but nothing ever appears. Any help is appreciated.
html
<head></head>
<body>
<div ng-controller="ArrayController">
<div ng-repeat="product in products">
<div ng-show="product.name.indexOf('Sam') == 2">
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular
var app = angular.module('myApp', []);
app.controller('ArrayController', ['$scope', function($scope){
$scope.products = [
{
name: 'Joe'
},
{
name: 'Bill'
},
{
name: 'Sam'
}
];
}]);
Possible solution using ng-if instead of ng-show
<body ng-app="myApp">
<div ng-controller="ArrayController">
<div ng-repeat="product in products">
<div ng-if="product.name.indexOf('Sam') > -1">{{product.name}}
</div>
</div>
</div>
</body>
var app = angular.module('myApp', []);
app.controller('ArrayController', ['$scope', function($scope){
$scope.products = [
{
name: 'Joe'
},
{
name: 'Bill'
},
{
name: 'Sam'
}
];
}]);
<div ng-show="product.name.indexOf('Sam') == 2"></div>
This will show the div if product.name contains the string "Sam" starting at its third character (i.e. "xxSam"). That probably isn't what you want.
The div is empty, so will not be visible to the user even if the ng-show is truthy. That, too, is probably not what you want.
I'm pretty sure what you do want is this:
<div>{{product.name}}</div>
At start i want to say im new in angular. Lets say my page look like this:
index.html:
<body ng-app="application">
<div class="container">
<div class="row">
<div class="col-sm-3 sideBar" ng-controller="NavController">
<input ng-model"search">
</div>
<div class="col-sm-9 content" ng-controller="ContentController">
<div ng-repeat="meet in meets | filter:search">
{{ meet.someData }}
</div>
</div>
</div>
</div>
</body>
And how can i make that input in NavController could filter data from ContentController? I want to do this in two controllers.
I'm not sure why you want to do this in two controllers, but it will be considerably more difficult. The Search functionality acts on the data in the content controller. I am guessing that your layout is driving your controller design.
There are numerous posts here that discuss techniques for this. This one: Share data between AngularJS controllers is well-regarded.
Actually you can just do that in a single controller.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.name = [{
"id":1
},{
"id":2
},{
"id":3
}]
});
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//code.angularjs.org/1.1.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl"><input ng-model='find' />
<div ng-repeat="x in name | filter : find">
{{x.id}}
</div>
</body>
</html>
For understanding, i used numbers as data. :) Hope it helps you
You can have a parent controller over the other two controllers. If you use the controllerAs method you can have controllers inside each other, see Angular Style Guide for helpful information about controllers and controllerAs.
You could write it like that and bind the search model to the ParentController.
Edit: I added another solution that I think is better
var app = angular.module('app', []);
app.controller('ParentController', function() {
this.search = 'p'; //set default just for fun
});
app.controller('NavController', function() {
//nav stuff
});
app.controller('ContentController', function() {
this.meets = [{
data: 'hi'
}, {
data: 'potato'
}, {
data: 'help me'
}, {
data: 'pie'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div class="container" ng-controller="ParentController as parentVm">
<div class="row">
<div class="col-sm-3 sideBar" ng-controller="NavController as navVm">
<input ng-model="parentVm.search">
</div>
<div class="col-sm-9 content" ng-controller="ContentController as contentVm">
<div ng-repeat="meet in contentVm.meets | filter:parentVm.search">
{{ meet.data }}
</div>
</div>
</div>
</div>
</body>
I stepped away from this for a bit and thought of another idea that doesn't involve using another controller. Here you are using a factory instead to communicate between the controllers. You have to share an object so that when you change the search.term in the input it will change for every reference.
var app = angular.module('app', []);
app.factory('Searcher', function() {
return {
search: {
term: 'p'
}
};
});
app.controller('NavController', function(Searcher) {
//nav stuff
this.search = Searcher.search;
});
app.controller('ContentController', function(Searcher) {
this.search = Searcher.search;
this.meets = [{
data: 'hi'
}, {
data: 'potato'
}, {
data: 'help me'
}, {
data: 'pie'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div class="container">
<div class="row">
<div class="col-sm-3 sideBar" ng-controller="NavController as navVm">
<input ng-model="navVm.search.term">
</div>
<div class="col-sm-9 content" ng-controller="ContentController as contentVm">
<div ng-repeat="meet in contentVm.meets | filter:contentVm.search.term">
{{ meet.data }}
</div>
</div>
</div>
</div>
</body>