I am working in an application where i attach dynamic form attributes with parent element. Sample data will look like this
$scope.uploadedFiles = [{
name: sample.jpg,
attr: [{
id: "caption",
display: "Title",
value: "",
placeHolder: "Enter title",
type: "textbox",
},
{
id: "description",
display: "Description",
placeHolder: "Enter description",
type: "textarea",
rows: 8,
value: "",
}]
},
{
name: sample2.jpg,
attr: [{
id: "caption",
display: "Title",
value: "",
placeHolder: "Enter title",
type: "textbox",
},
{
id: "description",
display: "Description",
placeHolder: "Enter description",
type: "textarea",
rows: 8,
value: "ttttt",
}]
}]
In template i am using code like this
<div class="col-md-4" ng-repeat="item in uploadedFiles">
<div style="padding:10px 4px;">
<img class="{{photocss}}" style="width:100%; height:auto;" src="{{item.name}}" />
<div ng-repeat="config in item.attr">
<input ng-if="config.type=='textbox'" type="text" ng-blur="validate(config)" class="form-control" ng-model="config.value" placeholder="{{config.placeHolder}}"></input>
<textarea ng-if="config.type=='textarea'" rows="config.rows" class="form-control" ng-model="config.value" placeholder="{{config.placeHolder}}"></textarea>
</div>
</div>
When i run application and upload some files. list of uploaded photos appear along with dynamic attributes defined in array e.g Title and Description.
When i type something in Title, all titles updated, it shows ng-model bind with all title attributes even i defined attributes for each item (photo) in separate array.
Issue shown in attached screen:
In screen you will look, when i type test title, its populated with other element titles too. Can someone help my where i made mistake.
Also created plnkr http://plnkr.co/edit/wruINbUYdarcxFYffJ0o?p=preview for issue that i am facing.
I want to put title with each element without conflicting with another element title.
I've made a plnkr here that works with you model structure: http://plnkr.co/edit/svR5Vz?p=preview and there no seem to be this effect. So probably error is in other part of your code.
Also using ng-switch could be a better option in this case, then ng-if:
<div ng-repeat="config in item.attr" ng-switch="config.type">
Related
I have a react-data-grid where each cell contains a checkbox and each column name has a check box beside it. When I click the checkbox beside the column name I want to check all of the checkboxes that correspond to that column. Is this possible?
let finalNotifications = [];
finalNotifications.push({
Domain: "Domain Name",
Types: "Type Name",
Email: <input type={"checkbox"}/>,
Text: <input type={"checkbox"}/>,
Phone: <input type={"checkbox"}/>
})
const detailColumns = [
{key: "Domain", name: "Domain"},
{key: 'Types', name: 'Message Name'},
{key: 'Email', name: <div>Email <input type={"checkbox"} onClick={}/></div>},
{key: 'Text', name: <div>Text <input type={"checkbox"} onClick={}/></div>},
{key: 'Phone', name: <div>Phone <input type={"checkbox"} onClick={}/></div>}
];
this.setState({notifications: finalNotifications});
notificationRows = this.state.notifications;
<ReactDataGrid
title={false}
columns={detailColumns}
rowGetter={i => notificationRows[i]}
rowsCount={5}
minHeight={150}/>;
You should check out their documentation. This should help. https://adazzle.github.io/react-data-grid/docs/examples/row-selection
I am new to angular JS. I have a dropdown box where static options with values are present.
Based on condition I have to select the default value which matches the value from Database. How can it be achieved?
model="TemplateObj.IsActive" has the int value 0,1 or 2 from DataBase.
<label class="">STATUS</label>
<select class="form-control input-sm" style="border: none" required ng-model="TemplateObj.IsActive" >
<option value="2">In Development</option>
<option value="1">Active</option>
<option value="0">InActive</option>
</select>
Use ng-options directive with array of statuses. The syntax may look a bit complicated for beginner, but you'll learn it someday: value as title for element in array
JS:
$scope.statuses = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
HTML:
<select ng-model="TemplateObj.IsActive" ng-options="status.value as status.title for status in statuses"></select>
Here is jsfiddle with working example.
An option would be to make use of the ng-options directive.
The documentation is here and there are quite a few examples you can guide from.
Try ngOptions instead of normal HTML select.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.status = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
$scope.TemplateObj = {
"IsActive": 1
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="TemplateObj.IsActive" ng-options="option.value as option.title for option in status"></select>
</div>
I am attempting to use angularJS to print out some data. Here is a relevant segment of the script:
$scope.incidentCats = [{
name: "FIRE",
incidents: [{
location: "location 1",
dateTime: "datetime 1",
currStatus: "currStatus 1"
},
{
location: "location 2",
dateTime: "datetime 2",
currStatus: "currStatus 2"
}]
},
{
name: "CODE BLUE",
incidents: [{
location: "location 3",
dateTime: "datetime 3",
currStatus: "currStatus 3"
}]
}];
As you can see in the data, incident type FIRE has records of two incidents, while incident type CODE BLUE has only one.
Here's the relevant code in the EJS file:
<div ng-repeat="category in incidentCats" class="incident">
<header class="category">
<strong>{{ category.name }}</strong>
</header>
<section>
<div ng-repeat="incident in category.incidents">
{{ incident.location }}<br>
{{ incident.dateTime }}<br>
{{ incident.currStatus }}<br>
</div>
</section>
</div>
Finally, here's my CSS for this particular section of the HTML (excluding any common CSS used for the whole project that is out of my hands):
.incident {
width: 100%;
height: 100%;
border: 1px solid #fff;
position: relative;
padding: 5px;
margin: 25px 0;
}
.incident section {
margin-top: 10px;
}
.incident section > div {
margin: 5px auto;
}
So far, the code works as expected except for one thing: when the div elements are created in the incident loop, I'm expecting two div to be created for the FIRE category and only one div for the CODE BLUE category. However, the code created two div for both categories.
That is not what I want. As a result of the second div in CODE BLUE containing <br> tags but no data because there is no second incident in the records for this category, there is now a section of empty space where this second div is location under the first div, which is fine because the first incident does exist and is correctly printed out. How can I rectify this?
Try using ng-repeat-start and ng-repeat-end
From Angular version 1.2 onwards, ng-repeat got two siblings directives named ng-repeat-start and ng-repeat-end. With these, we can explicitly specify the starting and ending for ng-repeat. So, instead of using the ng-repeat directive on one single DOM element, we can specify the ng-repeat-start and ng-repeat-end on any two DOM elements.
<div class="incident">
<header ng-repeat-start="category in incidentCats" class="category">
<strong>{{ category.name}}</strong>
</header>
<section ng-repeat-end>
<div ng-repeat="incident in category.incidents">
{{ incident.location }}<br>
{{ incident.dateTime }}<br>
{{ incident.currStatus }}<br>
</div>
</section>
</div>
I tried to replicate the behavior and I can see everything working well.
The ng-repeat is generating the HTML structure as it should. This might relate to the data you have posted. If the data posted is correct then HTML should work as expected. You can try sharing your exact code in order to debug the issue. I have used following array to reproduce the same:
$scope.incidentCats = [{
name: "FIRE",
incidents: [{
location: "location 1",
dateTime: "datetime 1",
currStatus: "currStatus 1"
},
{
location: "location 2",
dateTime: "datetime 2",
currStatus: "currStatus 2"
}]
},
{
name: "CODE BLUE",
incidents: [{
location: "location 3",
dateTime: "datetime 3",
currStatus: "currStatus 3"
}]
}];
Plnkr Link
Currently I am using select for dropdown. I would like to change this as multiselect dropdown. But when I declare the multiselect dropdown I am getting error saying "unknown attribute Options"
The current code which is just a dropdown without multiselect.
<select class="form-control"> <option ng-repeat="item in CETIGroupList" value="{{item}}">{{item}}</option>
</select>
What I wrote for multiselect is
<div ng-dropdown-multiselect="" options="CETIGroupList" ></div>
Please help me creating a multiselect dropdown.
Thanks
include loadsh.js , bootstrap css , AngularJS Dropdown Multiselect in your app. Inject angularjs-dropdown-multiselect in your app
angular.module('sampleApp', ['angularjs-dropdown-multiselect'])
in your HTML page
<div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" ></div>
in your Controller
$scope.example13model = [];
$scope.example13data = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
Check out this fiddle : https://jsfiddle.net/ebinmanuval/8Ltae8pb/
I am quite new with angularjs so I am not sure if what I am trying to do is the right way. Basically I want to display in my page a nested object, and a filter, this way the user can easily type keywords on an input and the content get filtered, to only display the recods that get found by the filter
However I notice that the filter gets the whole parent object and i was expecting only display the record, so with the following code, if i search for Japan it will display Sydney, Melbourne and los angeles.
Javascript
<script type="text/javascript">
var demoApp = angular.module('demoApp',['ngSanitize']);
demoApp.controller('simpleC',['$scope', function ($scope){
$scope.info = [
{name: 'Documents',links: [
{linkname:'title1',linknamesublink:[
{namesublink:'document 1', description: 'Sydney'},
{namesublink:'document 2', description: 'Tokyo <b>Japan</b>'}
]},
{linkname:'title2',linknamesublink:[
{namesublink:'document 3', description: 'Melbourne'},
{namesublink:'document 4', description: 'Los Angeles'}
]}
]},
{name: 'Video',links: [
{linkname:'title1',linknamesublink:[
{namesublink:'video 1', description: 'California'},
{namesublink:'video 2', description: 'San Francisco <b> USA</b>'}
]},
{linkname:'title2',linknamesublink:[
{namesublink:'video 3', description: 'South America'},
{namesublink:'video 4', description: 'Northern <b>Europe</b>'}
]},
{linkname:'title3',linknamesublink:[
{namesublink:'video name 5', description: 'Africa'},
{namesublink:'video name 6', description: 'Bangkok <b>Thailand</b>'}
]}
]},
];
}]);
</script>
html:
<div class="container" ng-app="demoApp">
<br /><input type="text" class="form-control" ng-model="search" >
<div ng-controller="simpleC">
<div ng-repeat="i in info | filter:search" >
{{i.name}} :
<div ng-repeat="link in i.links">
{{link.linkname}}
<div ng-repeat="sublink in link.linknamesublink">
{{sublink.namesublink}}: <!--{{sublink.description}}-->
<span ng-bind-html="sublink.description"></span>
</div>
</div>
</div>
</div>
</div>
Follow this example
http://www.whatibroke.com/?p=857
You can use filter in ng-repeat to filter items by property or write a filter yourself.
The author want to filter postcode property by the value of searc_postcode. So, he wrote //filter {postcode : search_postcode} //
Ps. Sorry, I misinterpret your question.
Write your own filter function. This way, you have total control over what is returned. https://docs.angularjs.org/api/ng/filter/filter
module.filter('searchfilter', function() {
return function(searchexpr) {
var filteredList = ['my', 'filtered', 'result'];//implement yourself
return filteredList;
};
});
and use searchfilter instead of filter in your markup.
Or, try to use a filter function as described here: http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/filtering-and-sorting-a-list.html (as far as I can tell, you didn't define a search function, i.e. the first agument for the filter expression).
Modified :
If you want to filter the objects based on any field(say "name"), you can use the below format
<div ng-repeat="i in info" ng-if="search==i.name">