We Keep Coding

get the value in input tag without clicking on it - angularjs

I have an input tag with a defualt value of 3. I want to get the defualt value using angular as shown
html
<input ng-model="mid" value="3" type="text" id="dataid" placeholder="here..." />
script
$scope.logId = function() {
console.log($scope.mid);
return ($scope.mid);
}
my challenge is that, if I call ng-click on logId without inputing the default value it returns undefined. But if I edit the default input value after page load, it does not return undefined. Please how can I get the default value in input tag using angularjs

It should be the other way around, you are not suppose to mix the between worlds, angular world & native one.
The default value of the input must come from $scope.mid, so you need to assign the default value on $scope.mid when you are creating the controller of the current page / component.
angular.module('app', [])
.controller('ctrl', function() {
this.value = 3;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl as $ctrl">
<input type="text" ng-model="$ctrl.value" />
<pre>{{$ctrl | json}}</pre>
</div>
</div>

how to process html using angular and bindings (?)

here is my testing page :
<div ng-controller="test">
<input ng-keyup="asIwrite($event)" />
<p id="entityContent"></p>
</div>
and my controller :
EntitiesApp.controller('test', ['$scope', function ($scope) {
$scope.asIwrite = function ($event) {
$('#entityContent').html($event.srcElement.value);
}
}]);
this is actually working, if i write click in the input, the paragraph will hold the clickable url (processed html).
I am using jQuery to update the content of the paragraph as to show html element as they render in the page..
But using jQuery is a work-around in my opinion.
I want to achieve that using just Angular. How can I do ?
note : sure I can sweep jQuery off my project and use innerHTML of the
element but I want to know the way of doing that in Angular with
bindings. I used ng-bind on a paragraph element but that just
render the value of the textarea as is, no html process is performed.

See working example below.
You are right by doubting using jQuery is the right thing to do, and as you would expect it is not. The angular way to do that is register your input into the scope using ng-model, and the way to display it is using the ng-bind-html directive. (or simply ng-bind if it was simple text with no HTML)
However, Angular will not allow HTML binding by default as it could be a security issue. If you are sure about what you write, you can use $scope.trustAsHtml as showed in my example.
angular.module('test', [])
.controller('test', ['$scope', '$sce', function ($scope, $sce) {
$scope.trust = function(content) {
return $sce.trustAsHtml(content);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<input ng-model="content"/>
<p ng-bind-html="trust(content)"></p>
</div>

You probably have tried to do something like this but the content doesn't come out as html
<input ng-model="input" />
<p id="entityContent" ng-bind-html="input"></p>
You need to ensure strict context escaping as described here:
https://docs.angularjs.org/api/ng/service/$sce
Please keep in mind what you're saying you want to do is explicitly prevented by angular developers as a way to mitigate XSS attacks

You don't need to do that, angular is simplier than that.
<div ng-controller="test">
<input ng-model="variable1" />
<p id="entityContent">{{variable1}}</p>
</div>
Angular binds variables automatically. When the input's value change, the new value will be printed.

How do I set the value of element in Angular.js

Why can't I do this in Angular.js:
document.getElementById('divid').value = 'Change Text to This';
And what is the "right" (Angular) way of doing it?

In Angular you use the ng-model directive in order to create a two-way data binding between your model (i.e. a JS variable) and the view (i.e. the <div>). Basically, this means that whenever you change the data in the view (through an input, for instance), the change will be reflected in your JS variable. See below:
HTML:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{myVariable}}</div>
<input type="text" ng-model="myVariable" />
</div>
</html>
JS:
/* App global module */
var myApp = angular.module('myApp');
/* Define controller to process data from your view */
myApp.controller('MyCtrl', function($scope) {
$scope.myVariable = "initialValue"; // this is the variable that corresponds to text inserted in your input
});
Here, myVariable will have "initialValue" as an initial value. Any further changes to the input will overwrite the value of this variable.
Also notice that {{myVariable}} injects the variable the data into your div. When you change the value in the input, the div text will be changed as well.

You'd have to bind a controller to your mark up and initialise your Angular app.
<div ng-app="myApp">
<div id="divid" ng-controller="valueController">{{value}}</div>
</div>
Then you can simply define a scope variable in your controller
myApp.controller("valueController", function($scope) {
$scope.value = "Hi!";
});
It is considered best to use the ng-app directive in the HTML tag of the page
jsFiddle

Angularjs - view and edit an object

i would like to have a list with entries of objects. If i click on an entry in that list i want to see the details of the object and an edit button on an area at the right side of the list. If i click that button the details disappers and a form to edit the object should appear.
html
<table class="table table-striped">
<tr
ng-repeat="object in objects"
ng-click="select(object.id)"
>
<td>{{object.name}}</td>
</tr>
</table>
<button ng-click="edit(selectedObject.id)">Edit</button>
<div class="view">
Name: {{selectedObject.name}}
</div>
<form>
<label>Name</label>
<input ng-model="object.name">
</form>
controller.js
myModule.controller('MyController', function($scope, MyService) {
$scope.objects = MyService.getObjects();
$scope.select = function(id) {
$scope.selectedObject = angular.copy(MyService.getObject(id));
};
$scope.edit = function(id) {
...
};
});
In the edit function i could use the selectedObject, but maybe in future i also want to edit the object directly without selecting it before. So first i could do the same like in the select function but then i would call the service twice to receive the same object...
Also i don't know really how to handle the toggle between view- and editmode.
Thanks in advance!

You should give the detail view and the edit form their own Controller, that way they're ready to be seperated.
Also a strong recommendation is using https://github.com/angular-ui/ui-router Nested-Views and Multiple/Named Views to manage your controllers.
You can then make the list view the parent and add the other 2 as child views with their own url like /item/:id/view and /item/:id/edit, see $stateParams for getting the values from the URL.

I am not 100% sure about your question but you could show/hide the input
$scope.edit = function () {
$scope.editmode = true
};
and
<div class="view" ng-show="!editMode">
Name: {{selectedObject.name}}
</div>
with
ng-show="editmode"
on the input
or you could use
ng-readonly="!editmode" on the input (then you won't need another div to display the name)
If your planning to display obejcts has a table, please consider ngGrid which allows editing inside the grid itself

Bind ng-models in input type checkbox

I have a problem when binding ng-models with ng-repeat in a input tag type checkbox.
I will first attach my code and then explain more in detail.
app/main.html:
<div ng-repeat="feature in features">
<input type="checkbox" ng-model="features[$index].name">{{features[$index].name}}
</div>
<br></br>
<div class="highlighter">
<span ng-class="{emo:Emotions}">Manually</span> <span ng-class="{feel:Feelings}">create</span> the <span ng-class="{emo:Emotions}">entire</span>
</div>
main.js
angular.module('webClientApp')
.controller('MainCtrl', function ($scope,$http) {
[...other variables...]
$scope.features = [{'name':'Emotions'},{'name':'Feelings'}];
[...other parts of code]
});
Let's also assume that in the main.css file there are references to the classes .emo' and.feel' respectively to highlight the target word when the user ticks the box relative to the feature.
Now, the application works correctly when I listed all the inputs one by one like the following:
<input type="checkbox" ng-model="Emotions">Emotions
<input type="checkbox" ng-model="Feelings">Feelings
but I wanted to wrap it into an ng-repeat and list the features in the controller scope, since the features I will considered will be more. When I try the code above when I tick on the box the name changes to `true'.
I have read a lot about how to bind models to an ng-repeat inside a input tag but none of the solutions apply to my case.
Can someone please help me?

I changed thigs up quite a bit from your original model but... I did get something to behave similar to what you are looking for.
HTML
<div ng-app="webClientApp">
<div ng-controller="MainCtrl">
<div ng-repeat="(feature,enabled) in features">
<input type="checkbox" ng-model="features[feature]">{{feature}}</input>
</div>
<div class="highlighter">
<span ng-class="{emo:features.Emotions}">Manually</span> <span ng-class="{feel:features.Feelings}">create</span> the <span ng-class="{emo:features.Emotions}">entire</span>
</div>
{{features}}<br>
{{features.Emotions}}<br>
{{features.Feelings}}
</div>
JS
var app = angular.module('webClientApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.features = {Emotions: true, Feelings: true};
});
Here's the fiddle: http://jsfiddle.net/rodhartzell/8YrxQ/
Hope this helps.

(i should add this as a comment, but I don't have enough rep. yet)
There is an issue on github which concerns your issue: https://github.com/angular/angular.js/issues/1404 and the comment of caitp shows some workarounds: https://github.com/angular/angular.js/issues/1404#issuecomment-30859987
You could (also) define a new javascript object in your controller and map the elements to that.
In controller: $scope.awnsers = {};
In template: ng-model="awnsers[feature.name]"
I hope this helps

You must use ng-checked instead of ng-model.
Check out this jsfiddle
http://jsfiddle.net/fizerkhan/z5z9s/24/
ngModel and ngChecked are not meant to be used together.
ngChecked is expecting an expression, so by saying ng-checked="master". If the expression is truthy, then special attribute "checked" will be set on the element
You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue and ngFalseValue (which only support strings right now), or write your own directive.