We Keep Coding

How can this element button be clicked using protractor?

I'm trying to select this button using protractor:
<button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$arrowAction(-1, 0)">
<i class="glyphicon glyphicon-chevron-up">
</i>
</button>
the only unique element in this is ng-click="$arrowAction(-1, 0)"
Nothing I have tried works:
element(by.css("//button[#ng-click='$arrowAction(-1, 0)']")).click();

//button[#ng-click='$arrowAction(-1, 0)'] is not a valid CSS selector. It actually looks like this is an XPath expression and you meant to use by.xpath() locator.
You can though use the partial attribute check instead:
$("button[ng-click*=arrowAction]").click();
$ here is a shortcut to element(by.css(...)), *= means "contains".
Or, do an exact match:
$("button[ng-click='$arrowAction(-1, 0)']").click();
I still don't like the location technique used in this case, but, given what we have, it is probably the best we can do. Ideally, if you have control over the application code and templates, add a meaningful id, class or a custom data attribute to uniquely identify the element.

Disable angular button using ng-disable using $scope var in controller

I have two buttons in my view and I want to disable the Summary button until my view is loaded.
<div class="btn-group" ng-init="showData = 1">
<button ng-model="showData" type="button" ng-class='{"btn btn-primary": showData == 1, "btn btn-white": showData != 1}' ng-click="showData = 1">Headline</button>
<button ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}' ng-click="showData = 2; summaryCall()">Summary</button>
</div>
I have a variable $scope.loadMainView = false, this change to true when the response of a Web service is ok, so I want want to disable my button until that variable change to true, but I dont know how to
achive that. I was thinking on ng-init for a $scope variable to be initialized as false and then asing that to an ng-disable or something like that but I'm not sure, Im new in angular and maybe my
approach is not at all correct.
Some help will be great.

Use ng-disabled
<button ng-disabled="!loadMainView" type="button"></button>
This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.
https://docs.angularjs.org/api/ng/directive/ngDisabled

using the ngDisabled directive is the right way to go
<button ng-disabled="!loadMainView" type="button"></button>

ng-if : hide/show attribute. How to do it?

I need something like this:
$scope.toggle = true;
<a If(toggle){ ng-click="vm.addFilter()" } else{ '' } >Add Policy</a>
Can I do it as easy as possible?

Do you want to do this?
//If you want to hide the element use this
<a ng-if="toggle" ng-click="vm.addFilter()" >Add Policy</a>
or this
//If you want to avoid the event with toggle variable
<a ng-click="toggle && vm.addFilter()" >Add Policy</a>

You can't add or remove any attribute using angular core directive, you could do something like below. I think you don't wanted to call vm.addFilter() conditionally.
<a ng-click="toggle && vm.addFilter()">Add Policy</a>
How && works in depth?
#deceze has good point that there is not need to show element unless it is doing some action. As per that you could also go for hiding/removing the element using ng-if as #Serginho suggested in his answer.

How to apply AngularJS ng-class based on condition?

I want to implement AngularJS ng-class if condition is true how can achieve this task using below code. I am new to AngularJS Any help will be appreciated.
So far tried code....
main.html
<button type="submit" class="btn btn-primary"
ng-disabled="disableSubmitButton"
ng-class="{disableSaveCls:disableSubmitButton}"
ng-click="submitClicked()">Submit</button>
mainCtrl.js
if (PromiseObj.data.StatusLookUpCode === 'COMPLIANCE') {
$scope.disableSubmitButton = true;
};

Add '' in the class name
Try like this
ng-class="{'disableSaveCls':disableSubmitButton}"

DEMO
what you are doing is correct, but you should apply class like this,
ng-class="{'disableSaveCls':disableSubmitButton}"
within single quotes

Why is ng-disabled not working on button?

My Plunkr: http://plnkr.co/edit/4MkenJPczFbxy5aoillL?p=preview
<body ng-controller="mainCtrl as main">
<h1>Hello Plunker!</h1>
<p>Button should not be disabled:</p>
<div ng-init="main.btnDisabled = false">
<button ng-model="main.my_button"
ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
disabled="main.btnDisabled"
type="button"
class="btn btn-info btn-sm switch-btn">My Button</button>
</div>
Angular
angular.module('app').controller('mainCtrl', function($scope) {
vm = this;
vm.btnDisabled = false;
});
I found this answer here, but it didn't work in my example.

The button is disabled because there is disabled attribute. This is enough for browser to know that element must be inactive. The value for disabled attribute doesn't matter, it can be anything.
This is exactly the reason why Angular provides ngDisabled directive, which adds disabled attibute when expression evaluates to true, and removes when it's false.
In your case you should use
<button ng-model="main.my_button"
ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
ng-disabled="main.btnDisabled"
type="button"
class="btn btn-info btn-sm switch-btn">My Button</button>

There are a few problems that I see here.
First, change disabled to ng-disabled.
Second, when you click the button nothing will change/happen. Instead of putting that functionality into your ng-class, use something like ng-click to change the state.
This isn't contributing to your problem but make sure that you include $scope before passing it into your controller function.
Speaking of $scope, the plunker would be a bit easier to read if you put something on the scope instead of using a controller alias. No problem with that, it just might help you and other people debug your code.