angular js code:
appModule.controller('dcrlistingCtrl', ['$scope','$modal','$state','$rootScope','loginService', 'servicePOST', 'appConstants','sessionService', '$http',
function($scope,$modal,$state,$rootScope,loginService, servicePOST, appConstants,sessionService, $http) {
$scope.doctors = function() {
alert("Doctors");
};
$scope.pharmacists = function() {
alert("pharmacists");
};
$scope.stockists = function() {
alert("pharmacists");
};
alert("trial");
$scope.contact="Doctors";
$scope.doctors=
[
{"patch":"BARIJPUR", "doctor":["RAMA SENA", "SMRITI IRANI","JAGDISH NAIR"]},
{"patch":"Anna", "doctor":["ASHISH NAIK", "SMRITI IRANI", "SAIRAJ NAIK"]},
{"patch":"Peter","doctor":["RATAN PANDEY", "RAMAN SHIVOLKAR"]}
];
}])
html code:
<button type="button" class="btn btn-primary " ng-click=="doctors()"><b>Doctor</b></button>
<button type="button" class="btn btn-primary " ng-click=="pharmacists()" ><b>Pharmacist</b></button>
<button type="button" class="btn btn-primary " ng-click=="stockists()" ><b>Stockist</b></button>
any angularJS experet here? need help!
the alert("trial"); is shown!
But when i click these buttons, no alert is shown!
why is that so?
any help and advice or changes are appreciated!
Get rid of the double equals after each ng-click.
The following:
ng-click=="stockists()"
should be
ng-click="stockists()"
The alert("trial") is being shown because it is not within the scope
of any click function of yours rather in the scope of controller where
the alert("trial") gets called once you are into the view which has
that particular controller. And, the matter of fact where your click
function is not working is because you have got 2 equals(==) in
ng-click.
<button type="button" class="btn btn-primary " ng-click="doctors()"><b>Doctor</b></button>
<button type="button" class="btn btn-primary " ng-click="pharmacists()" ><b>Pharmacist</b></button>
<button type="button" class="btn btn-primary " ng-click="stockists()" ><b>Stockist</b></button>
Related
How to modify text on one specific DOM object? Tried the following code but ended up changing for all the DOM text. It changes all the {{content}} values not only 'b1'.
myfunc () {
$scope.content="nothing";
angular.element(document.getElementById('b1')).scope().content ='something';
}
Here is the html:
<button id="b1" type="button" ng-click="myfunc($event)">
{{content}}
</button>
<button id="b2" type="button" ng-click="myfunc($event)">
{{content}}
</button>
You should not use angular.element or do any DOM manipulation whatsoever anywhere else than in directives. What you want to do here is define $scope.contents as an array / object and then update only the index you want:
$scope.contents = Array(2).fill('nothing');
$scope.updateButton = function(index) {
$scope.contents[index] = 'something';
};
As for your template:
<button type="button" ng-click="updateButton(0)">{{ contents[0] }}</button>
<button type="button" ng-click="updateButton(1)">{{ contents[1] }}</button>
I have a simple ng-click button at the moment that adds rows with the row and number.
What im wanting is to add a new segment of code which is this:
<div class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="filenameinv">Uploaded file</p>
<button type="button" ng-click="deleteAtt(file)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-click="addAtt()" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
Heres what i have in my controller
$scope.rows = ['Row 1', 'Row 2'];
$scope.counter = 3;
$scope.addAtt = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
};
I'm wanting to adapt the controller code to make it work with copying the code above up to 5 items. And ideally on each new item the plus button from the previous would disappear so there would always only be one button.
Basically at the moment there is one upload button. With a delete and plus button that appears when a file is uploaded. What i'm wanting is when a user wants to upload another file said user can click the plus button and another uploader will appear. I also need to get this saving against the db but thats another headache!
Heres the uploader
$scope.uploadinv = function (file) {
if (file) {
Upload.upload({
url: '',
data: {file: file}
}).then(function (resp) {
sweetAlert({title: "Attachment Saved", type: "success"});
}, function (resp) {
sweetAlert({title: "Attachment Not Saved", type: "error"});
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
$scope.event.filenameinv = evt.config.data.file.name
});
}
};
This is the bit i've done so far
$scope.fileUploadRows = [];
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter = 1;
$scope.addInvAttachment = function() {
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter++;
}
May be this could help:
<div class="row" ng-repeat="row in rows track by $index">
<div class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="fileUploadRows[$index].filename">Uploaded file</p>
<button type="button" ng-click="deleteAtt(file)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-if="$last" ng-click="addAtt()" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
Please note that you probably should handle (array of) filenameinv somehow. You didn't show in your code how you use/intialize this variable.
EDIT: See updated markup above. The trick is to have the appropriate $index. I think you should also call addInvAttachment() function, probably in the sucess then of the upload.
I need to get the button id value using angularjs.I have written the code but i am getting the value as "undefined".So please suggest me the code which i need to use.
My code is:
<button type="button" class="btn btn-primary ole" data-toggle="tooltip" id="buttonvalue" name="rdoResult" value="SUN" ng-click="addvalue()" ng-model="testDate23" data-placement="left" data-original-title="this is a left tooltip">
SUN
</button>
<button type="button" ng-value="2" class="btn btn-primary ole two" data-toggle="tooltip" ng-click="addvalue()"
ng-model="testDate23" value="MON" id="buttonvalue" data-placement="top" data-original-title="this is a top tooltip">
MON
</button>
Script code:
$scope.addvalue = function() {
var datevaluee=$scope.testDate23;
}
You need to pass the $event in ng-click function like below..
ng-click="addvalue($event)"
below will be the function implementation
$scope.addvalue = function(element) {
$scope.testDate23 = element.currentTarget.value; // this will return the value of the button
console.log( $scope.testDate23)
};
you can try this.
<button ng-click="addvalue(testDate23='SUN')">
button
</button>
or
<button ng-click="addvalue(testDate23='MON')">
btn2
</button>
Find fiddle Fiddle example
Hope it will help.
Button is an input for submitting data, not setting data.
You need use directive.
Live example on jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.getValue = function() {
$scope.value = $scope.testDate23;
}
});
myApp.directive('buttonValue', function() {
return {
restrict: 'A',
scope: {
buttonValue:"="
},
link: function(scope, element, attr) {
scope.$watch(function(){return attr.ngValue},function(newVal){
scope.buttonValue = newVal;
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input ng-model="btnValue">
<button ng-value="{{btnValue}}" ng-click="getValue()" button-value="testDate23">
MON
</button>
<br>
<pre>testDate23= {{testDate23}}</pre>
<pre>value= {{value}}</pre>
</body>
If you want to set hardcoded value then use ng-init
<button type="button" ng-init="value=2" class="btn btn-primary ole two" data-toggle="tooltip" ng-click="addvalue()"
ng-model="testDate23" value="MON" id="buttonvalue" data-placement="top" data-original-title="this is a top tooltip">
MON
</button>
You can use value aywhere in your same template.
I would like to show the button in the code only if none of the aspects in $scope.aspects are true.
<aspect-form ng-repeat="aspect in aspects | filter:{active: true}">
</aspect-form>
<a class="btn btn-primary btn-lg" role="button">Save</a>
How would I do this?
You can do it without binding to a function on the scope like this:
<a class="btn btn-primary btn-lg"
ng-if="(aspects | filter:{active: true}).length === 0">Save</a>
In situations like these I like to use the array.every() and array.some() functions:
<a class="btn btn-primary btn-lg" role="button" ng-if="allAspectsFalse()">Save</a>
$scope.allAspectsFalse = function() {
return $scope.aspects.every(function(aspect) {
return !aspect.active;
});
}
You can use ng-if in the a element, and give it a function that evaluates to true only when all of the aspects in $scope.aspects are false.
<a class="btn btn-primary btn-lg" ng-if="allAspectsAreFalse()">Save</a>
I also found a solution. Mine is using ng-show instead but is practically the same. I will show the whole solution.
<a class="btn btn-primary btn-lg" role="button" ng-show="someAspectShowing()">Save</a>
and in the controller I have defined the function:
$scope.someAspectShowing = function() {
for(index=0; index < $scope.aspects.length; ++index) {
if($scope.aspects[index].active === true) {
return true;
}
}
return false;
};
I'm failing to retrieve the actual value of my selected option (ng-model=filter) in my select html bloc.
Note that if I don't set $scope.filter then $scope.filter stay undefined even if I select an option in the dropdown list.
My html template, filters.html :
<div ng-if="!showFilterTemplatePlz">
<button class="btn btn-primary" ng-click="showFilterTemplate()" type="button">Add Filter</button>
</div>
<div ng-if="showFilterTemplatePlz" class="inline">
<button class="btn btn-primary" ng-click="closeFilters()" type="button">Close filters</button>
<label>filters</label>
<select ng-model="filter" ng-options="filter.name for filter in filterOptions" class="form-control">
</select>
<p>{{filter.name}}</p>
<button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button>
</div>
In my directive:
.directive('filters', ['retrieveStaticDatasService','usersService', function(datasService, usersService) {
return {
restrict: 'E',
scope: false,
controller: function ($scope) {
/* init */
$scope.filterOptions = [
{name: "languages"},
{name: "nationality"},
{name: "location"}
];
$scope.filter = $scope.filterOptions[0];
/* end init */
$scope.showFilterTemplate = function(){
$scope.showFilterTemplatePlz=true;
}
$scope.closeFilters = function(){
$scope.showFilterTemplatePlz=false;
}
$scope.addFilter = function(){
console.log("filter to add : " + $scope.filter.name);
}
},
templateUrl: '/partials/components/filters.html'
}
}])
Result :
I can see the actual value appears in my html but i will always show "languages" for$scope.filter.name in my console, whatever option I selected! I took a screenshot to show you : http://hpics.li/4a37ae3
Thanks for your help.
[Edit : I made some test and my model are setted and updated only if they are not inside the "<div ng-if="..."></div>"]. Is it not allowed to put a ng-if directly in the directive?
Answer : Angularjs ng-model doesn't work inside ng-if
I found the solution, the problem was that ng-if creates a child scope. So I changed filter to $parent.filter in
<select ng-model="$parent.filter" ng-options="option.name for option in filterOptions" class="form-control">
</select>
I think you are confusing it by having to objects named 'filter'. You might be overwriting the ng-options object rather than your controller one.
Try changing to
<select ng-model="filter" ng-options="option.name for option in filterOptions" class="form-control"></select>
<p>{{filter.name}}</p>
<button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button>