i try to make simple CRUD with angularjs and php api
the problem is in angularjs
i have code like this :
$scope.editData = function(pid) {
$scope.hideform = false;
$scope.edit = false;
$scope.pid = $scope.projects[pid].pid;
$scope.title = $scope.projects[pid].title;
$scope.pcode = $scope.projects[pid].pcode;
$scope.type = $scope.projects[pid].type;
$scope.proj_type = $scope.projects[pid].proj_type;
};
$scope.saveData = function(pid, title, pcode, type2, proj_type){
$http.post("api/getProject.php",
{type: "edit", id:pid, title:title, pcode:pcode, type2:type2, proj_type:proj_type})
.success(function(data) {
notification(data.success, data.message);
$scope.hideform = true;
});
};
and have form for editing data (edit button clicked , then show form edit with ng-model loaded on it
like this
<form class="form-horizontal" ng-hide="hideform" ng-submit="saveData(pid,title, pcode, type, proj_type)">
<h3 ng-hide="edit">Edit Project:</h3>
<div class="form-group">
<label class="col-sm-2 control-label">PID:</label>
<div class="col-sm-10">
<input type="text" ng-model="pid" ng-disabled="!edit" placeholder="PID">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Title:</label>
<div class="col-sm-10">
<input type="text" ng-model="title" placeholder="Title">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Pcode:</label>
<div class="col-sm-10">
<input type="text" ng-model="pcode" placeholder="Pcode">
</div>
</div>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</form>
the script are working , but everytime i click save editing then click edit button (on each row on table) , the ng-model on form input still same like the last data what i save but other input are changed , ex : i edited title , when click edit button on different row on the table , just pcode changed to different row data , the Title still same like the last data i edit
sorry if my explanation make all of you confuse
Any help will be appreciated
here is the image if my explanation not clear
This problem resolved using
$scope.selectedProject = $scope.projects[pid];
so editData function look like this
$scope.editData = function(pid) {
$scope.hideform = false;
$scope.edit = false;
$scope.pid = $scope.projects[pid].pid;
$scope.title = $scope.projects[pid].title;
$scope.pcode = $scope.projects[pid].pcode;
$scope.type = $scope.projects[pid].type;
$scope.proj_type = $scope.projects[pid].proj_type;
$scope.selectedProject = $scope.projects[pid];
};
and ng-model (on every input)
need to change like this
<input type="text" ng-model="selectedProject.pid" ng-disabled="!edit" placeholder="PID">
instead of this
<input type="text" ng-model="pid" ng-disabled="!edit" placeholder="PID">
Now every ng-model changed every edit button has been click after save Changes button clicked :)
Thank you!
Related
I am stuck with strange issue. Actually I am fetching the data from ajax and showing it on text boxes.
So, basically I have 3 text box (City, City1, City2). By default City textbox is visible rest will show if they have data from Ajax.
User can add city by clicking + button or remove by click on - button.
I am able to fetch and show the data properly on textboxes.
But when I want to add/show City1 or City by clicking on + button. It is simply executing form submit event.
Here is code for Ajax call.
formApp.controller('getprofile', function($scope,$http){
$http({
url: 'get_job_city.php',
method: "GET",
params: {uid: uid}
})
.success(function(data) {
if (data.success) {
$scope.formData.city1 = data.city1;
$scope.formData.city = data.city;
$scope.formData.city2 = data.city2;
}
});
})
Code for form save and show hide city textboxes.
var formApp = angular.module('formApp', []);
formApp.controller('formProfile1', function($scope,$http){
$scope.secondcity1city1 = false;
$scope.thirdcity2 = false;
$scope.hidecity1 = function() { $scope.secondcity1 = false; }
$scope.hidecity2 = function() { $scope.thirdcity2 = false; }
$scope.showcity = function() { $scope.secondcity1 = true; }
$scope.showcity1 = function() { $scope.thirdcity2 = true; }
$scope.formData = {};
$scope.formprofile1 = function() {
$scope.ajaxload = true;
var allData={'formData': $scope.formData, 'uid': uid}
$http({
method : 'POST',
url : 'city_update_exec.php',
data : allData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers
})
.success(function(data) {
$scope.ajaxload = false;
if (!data.success) {
$scope.errorcity = data.errors.city;
$scope.errorcity1 = data.errors.city1;
$scope.errorcity2 = data.errors.city2;
}else{
alert('City has been updated.');
}
});
};
})
HTML codes are below.
<div class="container" ng-controller="formProfile1">
<form name="formProfile1" method="post" id="formProfile1"
ng-submit="formprofile1()" role="form">
<div ng-controller ="getprofile">
<div id="firstcity">
<div class="col-xs-10">
<div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }">
<input name="city" id="city" type="text"
class="form-control textbox1 txt-auto"
required="required" placeholder="Job Location* "
ng-model="formData.city">
<div class = "errorba" ng-show="errorcity">{{errorcity}}
</div>
</div>
</div>
<div class="col-xs-2">
<!--<button class="remove" ng-click="removeChoice()">-</button>-->
</div>
<button class="addfields" ng-click="showcity()">+</button><br>
</div>
<div ng-show="secondcity1">
<div class="col-xs-9"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }">
<input name="city1" id="city1" type="text"
class="form-control textbox1 txt-auto"
placeholder="Job Location* " ng-model="formData.city1">
<div class = "errorba" ng-show="errorcity">{{errorcity1}}
</div>
</div>
</div>
<div class="col-xs-3">
<button class="remove" ng-click="hidecity1()">-</button>
<button class="addfields" ng-click="showcity1()">+</button><br>
</div>
</div>
<div ng-show="thirdcity2">
<div class="col-xs-10"><div class="topjob_resumetitle"
ng-class="{ 'has-error' : errorcity2 }">
<input name="city2" id="city2" type="text"
class="form-control textbox1 txt-auto"
placeholder="Job Location* "
ng-model="formData.city2">
<div class = "errorba" ng-show="errorcity2">{{errorcity2}}
</div>
</div>
</div>
<div class="col-xs-2">
<button class="remove" ng-click="hidecity2()">-</button>
</div>
More text boxes are here
</div>
The problem is that you have not set a type for your buttons, and therefore are defaulting to submit types, which will submit the first parent form found in the DOM when clicked. To allow your custom click handlers to execute properly, change your button types to "button" like so:
<button type="button" class="addfields" ng-click="showcity()">+</button><br>
Remove method="post" and add novalidate on form tag it will stop html5 validation
<form name="formProfile1" novalidate id="formProfile1"
ng-submit="formprofile1()" role="form">
Also if its still not works then change all your button to
<input type="button">//for rest of the buttons
<input type="submit">//for submit button
To make an http request you don't need to use the separate controller. Use factory method in your code for ajax and inject it as a dependency in your controller. Refer Angular Factory method
<div class="info-block" ng-app="">
<div ng-controller="Note">
<div class="checkbox">
<label>
<p><b>Primary Publication: </b>
{{ form_widget(form.input_ppubs, { 'attr': {'class': 'valOption'}}) }}
</p>
</label>
</div>
<div ng-repeat="item in items">
<input type="text" placeholder="new input" ng-model="item.primaryPub">
</div>
<button type="button" ng-click="add()">New Item</button>
</div>
I am trying to retrieve the value of the html input field and remove it from input upon a button click
I am able to get the code, but I don't know how to remove the code.
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
//angular way of implementing document.getElementByID();
pub1 = angular.element('#form_input_ppubs').val();
$scope.items.push({
primaryPub: pub1
});
};
}
You don't have to retrieve your items like this. It's ugly and not the angular way. angular.element('#form_input_ppubs').val();
Instead, simply reference it in your input using ngModel.
Declare it in your scope.
$scope.inputItem = null;
HTML
<input ng-model="inputItem " />
Use it in your function:
$scope.addItem = function(item) {
$scope.items.push(item);
//reset the model
$scope.inputItem = null;
}
Call it using ng-click
<button type="button" ng-click="addItem(inputItem)">Add Item</button>
If you do:
console.log($scope.items);
You should see an entry for primaryPub, the model for your input. Then you can target it by nulling the model, so:
$scope.items.primaryPub = null;
However you're using this inside an ng-repeat:
<div ng-repeat="(i, item) in items">
<input type="text" placeholder="new input" ng-model="items[i].primaryPub">
</div>
So your console.log (if you have more than one item in 'items') should show an array-like structure for primaryPub.
I'm using $scope.checked to show/hide the "Top" text box, name="numRows" in my html.
However, even when I click on the 'top' radio button, $scope.checked always retains the value of `all' when I debug my controller code.
This simply plunker seems to work fine, http://plnkr.co/edit/6GoUZw7zkf8oqUmKg9hf?p=preview, but it won't work in my application.
In the plunker, there's a simple button whose click value will hit the controller event $scope.showval to show the value of either "top" or "all".
My HTML:
<div class="form-group">
<div class="row-fluid">
<label class="col-md-2 col-lg-2 control-label" for="numRows">Returned Rows</label>
<!-- ALL ROWS RADIO -->
<div class="col-md-1 col-lg-1">
<label class="radio-inline" for="radio-all">
<input name="radios" id="radio-all" value="all" type="radio" ng-model="checked" ng-click="setTopRows('all')">All
</label>
</div>
<!-- TOP NUM OF ROWS RADIO -->
<div class="col-md-1 col-lg-1">
<label class="radio-inline" for="radio-top">
<input name="radios" id="radio-top" value="top" type="radio" ng-model="checked" ng-click="setTopRows('top')">Top
</label>
</div>
<!-- NUM OF ROWS TEXT BOX -->
<div class="col-md-2">
<input ng-show="checked == 'top'" ng-hide="checked == 'all'" type="text" class="form-control" name="numRows" ng-model="settings.numRowsReturned" placeholder="" >
</div>
<div class="col-md-3">
Click to show<input type="button" ng-click="showval(e)">
</div>
</div>
</div>
A snippet from my angular controller code :
The $scope.checked value is always 'all', even when I click on 'top' from the html.
(function () {
'use strict';
angular.module('rage')
.controller('GadgetSettingsCtrl_NEW', ['$rootScope', '$scope', '$modalInstance', gridSettings]);
function gridSettings($rootScope, $scope, $modalInstance,) {
var settings = this;
$scope.checked = 'all';
$scope.showval = function (e) {
var test = $scope.checked;
}
$scope.setTopRows = function (numRows) {
if (numRows === 'top') {
$scope.checked = 'top';
}
else {
$scope.checked = 'all';
}
}
function checkOptions(){
var top = '';
if ($scope.checked === 'top') {
top = (settings.numRowsReturned != undefined ? settings.numRowsReturned : '');
}
}
}; // end of gridSettings()
})();
Can someone help me clear up why $scope.checked is NOT changing when I click on the radio buttons ?
thank you,
Bob
****** UPDATE *********
I've added a simple ng-click="setTopRows('all')" to force my scope variable to change. This works, but it seems like too much code to accomplish this.
I've got a form with a text field and a few checkboxes. It works perfectly fine if I fill out the <input type="text"> field first, but if I mark the checkboxes first, the checkboxes aren't passed to my function on ng-submit().
HTML
<form ng-submit="createService(service)">
<input type="text" ng-model="service.name" required>
<div ng-repeat="provider in providers">
<md-checkbox id="{{ provider }}" ng-model="service.providers[provider.$id]">{{ provider.name }}</md-checkbox>
</div>
<button type="submit" class="h4 button button-big mb4" aria-label="Add Service">Add Service</button>
</form>
JS
$scope.createService = function(service) {
var checkedProviders = {};
var serviceProviders = service.providers;
for (var checked in serviceProviders) {
if (serviceProviders[checked]) {
checkedProviders[checked] = true;
}
}
services.$add({
name: service.name,
providers: checkedProviders
});
};
It's very weird and I can't work out why it is doing this. Any help on why this is happening is appreciated.
Thanks in advance.
I'm trying to clear an input text after saving some data but it just doesn't work. This is what I've tried so far (what it's in comments too):
Thanks in advance for any help!
HTML:
<div id="add-tag">
<h3>Add new tag</h3>
<form name="addTagForm">
<input class="form-control" type="text" ng-model="newTag" ng-change="onChangeTag()">
<button class="btn btn-primary" ng-click="addTag(newTag)">Add Tag</button>
</form>
</div>
JS:
//$scope.master = {};
// Reset scope
$scope.reset = function() {
$scope.newTag = "";
//$scope.newTag = angular.copy($scope.master);
};
$scope.addTag = function(tag) {
// Save some data (this works fine)
// ....
// Reset input field
$scope.reset();
};
UPDATE:
My ng-controller was set to the parent template (I'm using ui.router). Just added it to the child template and it indeed worked.
<div id="add-tag" ng-controller="FormController">
<h3>Add new tag</h3>
<form name="addTagForm">
<input class="form-control" type="text" ng-model="newTag" ng-change="onChangeTag()">
<button class="btn btn-primary" ng-click="addTag(newTag)">Add Tag</button>
</form>
</div>
I am new in angularjs but after trying some thing i got some sort of solution for you. You can check this bin. I have just added a controller :-
function test_c($scope){
$scope.reset = function() {
$scope.newTag = "";
//$scope.newTag = angular.copy($scope.master);
};
$scope.addTag = function(tag) {
// Save some data (this works fine)
// ....
// Reset input field
$scope.reset();
};}
Look at the html part:-
<body ng-app>
<div id="add-tag" ng-controller="test_c">
<h3>Add new tag</h3>
<form name="addTagForm">
<input class="form-control" type="text" ng-model="newTag" ng-change="onChangeTag()">
<button class="btn btn-primary" ng-click="addTag(newTag)">Add Tag</button>
</form>
</div>