The form input field have parameters X and Y. If I select the operator (add, subtract, multiply or divide) the result should be displayed in the result area. All these values should be dynamically transferred to the table view using Backbone.js. Since I started learning the core information, can somebody suggest how to create a dynamic view in a table by Backbone.js and how to collect data from the form inputs?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Math Function</title>
<script src="Script/jquerylibrary.js"></script>
<script src="Script/Underscore.js"></script>
<script src="Script/Backbonelibrary.js"></script>
<script src="JavaScript/mathFunction.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/mathFunction.css"/>
</head>
<body>
<form>
<label>Enter Value of X :</label>
<input type="text" id="parameter1">
<label>Enter Value of Y :</label>
<input type="text" id="parameter2">
<select>
<option>Add</option>
<option>Subtract</option>
<option>Multiply</option>
<option>Divide</option>
</select>
<label>Result of the fucntion :</label>
<input type="text" id="Result">
</form>
<br>
<hr/>
<div>
<table>
<thead>
<tr>
<th>Parameter X</th>
<th>Parameter Y</th>
<th>Operator</th>
<th>Result</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here's an example of a dynamic view in a table with Backbone :
var Row = Backbone.View.extend({... // view that represents a row in the table
var MyView = Backbone.View.extend({... // view that interact with the inputs
Related
I have a form with multiple fields. How do I implement search using angularjs? For example I have the following page:
<pre>
<input name="title">
<input name="isbn">
<input name="author">
<br/>
<input type="submit">
<!-- list the book information -->
Title Author ISBN
</pre>
I want the bottom list to display based on user input on the search fields from the server. Note:The user can input on mutiple fields. How do I accomplish the search when the user clicks the submit button?
Do I need to write one submit method. If so how can I get the values and do the query depending on the field is left blank or not?
Thanks
If your using angularJS you don't need a submit it will do it asynchronously. Just add an ng-model to your input and filter the results based on that. Something like this:
<input name="title" ng-model="title">
<input name="isbn" ng-model="isbn">
<input name="author" ng-model="author>
<div filter: title | filter:isbn | filter:author >
Title Author ISBN
</div>
Something like this
<form name='fred' novalidate='novalidate' ng-submit='submitFunc()'>
<input name='username' required='required' pattern='a-z'>
<input type='email'>
<input type='submit' ng-disabled='fred.$invalid'>
</form>
In your submitFunc you would do an $http request to get your data and filter it and then store the results in an array and do an ng-repeat in the view below the form to iterate over your results
A basic implementation should look like this:
the code:
app.controller('SampleController', ['$scope', function($scope) {
var search = function() {
yourAjaxMethod({author: $scope.author, isbn: $scope.isbn, title: $scope.title}).then(function(list) {
$scope.list = list;
});
}
$scope.$watch('author', search);
$scope.$watch('isbn', search);
$scope.$watch('title', search);
// the init loading
search();
}])
The markup:
<pre>
<input name="title">
<input name="isbn">
<input name="author">
<br/>
<!-- list the book information -->
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
</tr>
<tr ng-repeat="book in list">
<td ng-bind="book.title"></td>
<td ng-bind="book.author"></td>
<td ng-bind="book.isbn"></td>
</tr>
</table>
I have an Angular form where ng-repeat is used to create several TDs and each TD element holds a textbox whose value I want to modify using a function call with parameter. I hold values in an array and want to pick a value from there and put in textbox element.
<div ng-controller="MyController" ng-form id="myForm" name="myForm">
<table>
<tr>
<td ng-repeat="myObject in arrayOfObjects">
<input type="text" ng-???="{{ myFunctonCall(myObject.Property) }}" />
</td>
</tr>
</table>
</div>
Is there a standard ng directive or it can be achieved using formatters, parsers?
You can use ng-init to initialize a scope value inside each child scope of ng-repeat. Those values won't be shared with your parent controller, where arrayOfObjects is defined.
https://docs.angularjs.org/api/ng/directive/ngInit
(as said in the doc, do not use too much ngInit)
<div ng-controller="MyController" ng-form id="myForm" name="myForm">
<table>
<tr>
<td ng-repeat="object in arrayOfObjects">
<input type="text"
ng-init="value = myFunctionCall(object.Property);"
ng-model="value" />
</td>
</tr>
</table>
</div>
as #Deblaton Jean-Philippe said you can use ng-model to read the data
<input type="text" ng-model="myinitialvalue" />
then process it in the controller the way you want:
$scope.$watch('myinitialvalue' function(newval, oldval){
//newval is equal to value of myinitialvalue
//here we modify it and assign to myvar, here for example we just add 'abc' to it
$scope.myvar = newval + 'abc';
});
and angular template syntax {{myvar}} to show it in textarea or in some other place if the page:
<textarea>{{myvar}}</textarea>
I've taken some example code from the AngularJS docs, this allows for basic filtering on multiple field types. How can I add a date range to this? I've tried adding multiple filters with a condition in {} but this isn't working.
Example code
<div ng-init="friends = [{name:'John', phone:'555-1276', date:'2015-05-12'},
{name:'Mary', phone:'800-BIG-MARY', date:'2014-02-24'},
{name:'Mike', phone:'555-4321', date:'2013-08-03'},
{name:'Adam', phone:'555-5678', date:'2015-03-16'},
{name:'Julie', phone:'555-8765', date:'2014-12-27'},
{name:'Juliette', phone:'555-5678', date:'2011-01-19'}]">
</div>
<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<!-- I've added this START-->
<label>Date between<input ng-model="search.dateFrom"></label><br>
<label>and<input ng-model="search.dateTo"></label><br>
<!-- END -->
<table id="searchObjResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friendObj in friends | filter:search">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
I've omitted any date range logic on the ng-repeat filter.
I'm trying to use a hack on ui.bootstrap.typeahead to add a dropdown. The hack found here. It will open a dropdown on a mouse click in the input field. I got it to work with on input field but when adding a second input like below, the dropdown stops working.
<input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >
<input type="text" ng-model="selected_2" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >
Here is a plunker to demonstrate the problem. Remove the second input and the dropdown will work. I have looked at the scope of the directive but I'm new to Angular and I can't figure out what's the problem and how to fix it. Any ideas would be appreciated.
Your code is fine. You just need to add this dependency in your plunk.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
This will allow your dropdown to float over the top of your entry fields, rather than being blocked by them.
Here is the entire Index.HTML below. Or, view my Plunk here: http://plnkr.co/edit/X4lSmQ?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Dropdown!</h1>
<div>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<div class="form-group">
<input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus="" />{{selected}}
<br />
<!-- if following line is removed the dropdown works agina.-->
<input class="col-lg-offset-4" type="text" ng-model="selected_2" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus="" />{{selected_2}}
</div>
</div>
</div>
</body>
</html>
This is a much cleaner way (if you can use html5). First create a datalist
<datalist id="items">
<option ng-repeat="item in items" value="{{item.someValue}}"> </option>
</datalist>
Then for your input.
<input class="input-sm form-control" id="itemsInput" type="search" list="items" />
Just make sure that list="x" and datalist id="x" are equal.
This will also "autocomplete" as you type
I'm new to AngularJS and I am going through this link and I am curious to do the experiment on a text box control using ng-bind. But it is not working.
<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<input type ="text" ng-bind="name" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
How can I populate a text box using ng-bind?
As, The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes, you will not be able to bind to an input box:
<input type ="text" ng-bind="name" />
You can instead use ng-value
<input type="text" ng-value="name" />
or you can populate your input box using the model within the value attribute.
<input type="text" value="{{name}}" />
See this codepen