I have an angular x-editable sample here where i am trying to show / hide a form control based on the status value like,
<div ng-show="user.status == '1'">
<span class="title">Show: </span>
<span editable-text="user.showfield" e-name="showfield">{{ user.showfield || 'empty' }}</span>
</div>
It will be shown only when i save the form. How can I make it show when changing the control field itself?
Fixed demo here.
You can get there by directive e-ng-change.
Sample codes:
<div>
<!-- editable status (select-local) -->
<span class="title">Status: </span>
<!-- by e-ng-change, get result before save, and asign to user.showstatus -->
<span editable-select="user.status" e-ng-change="user.showstatus=$data;" e-name="status" e-ng-options="s.value as s.text for s in statuses">
{{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
</span>
</div>
<!-- toggle display by user.showstatus -->
<div ng-show="user.showstatus == '1'">
<span class="title">Show: </span>
<span editable-text="user.showfield" e-name="showfield">{{ user.showfield || 'empty' }}</span>
</div>
Credit: Angular x-editable github issue #105
Related
I believe there is an answer to my question. I do exactly like some solution I found, but still I can't set default value to my dropdown. Here is my code.
<td>
<div ng-controller="daftarGroup" class="ui fluid multiple selection dropdown">
<input name="group" value="admin" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Group</div>
<div class="menu">
<div ng-repeat="y in groups" class="item" data-value="{{ y.gid }}">
{{ y.gid }}
</div>
</div>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
</div>
</td>
My dropdown will have a list of group, one of the item is "admin". The data is presented using Angular. Everytime I load the page, I want the dropdown show "admin" as default value. On another fiddle, it run perfectly, but not in my machine. Every time I refresh the page, no value set on my dropdown, but the list of group is accessible. Any idea about my case?
Thanks.
You can use data-ng-options and ng-init with ng-model to have a default value.
HTML:
<select
ng-init="group = groups[0]"
ng-model="group"
data-ng-options="y.gid for y in groups">
</select>
Angular controller:
$scope.groups = [
{gid: 1},
{gid: 2}
];
I have the following in a view file:
<p class="presentation black">Sections:
<span data-ng-if="currentTab == 'tab1'">
<div ng-repeat="question in filtered = (template.questions | unique:'sectionName')"></div>
<p class="presentation black">{{filtered.length}}</p>
</span>
<span data-ng-if="currentTab == 'tab2'">
<div ng-repeat="sheet in filtered = (template.sections[0].sheets | unique:'name')"></div>
<p class="presentation black">{{filtered.length}}</p>
</span>
</p>
When tab1 is selected, the information is displayed correctly. However when on tab2, it appears that <p> element in both spans is being displayed - an empty value in displayed for the <p> element related to tab1. By looking at the DOM tree it also seems that when on tab2, the ng-if condition is not displaying: <!-- end ngIf: currentTab == 'tab2' -->. Can anyone see where the issue may be? Let me know if more code is required.
The "p" shouldn't be in a "span" according to HTML5 specs. Change the "span" to a "div".
HTML
<p class="presentation black">Sections:
<div data-ng-if="currentTab == 'tab1'">
<div ng-repeat="question in filtered = (template.questions | unique:'sectionName')"></div>
<p class="presentation black">{{filtered.length}}</p>
</div>
<div data-ng-if="currentTab == 'tab2'">
<div ng-repeat="sheet in filtered = (template.sections[0].sheets | unique:'name')"></div>
<p class="presentation black">{{filtered.length}}</p>
</div>
</p>
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
Not sure exactly what's going on, but it looks like my expressions are not getting evaluated or expanded.
<div ng-repeat-start="q in questions">
<h3>{{q.text}}</h3>
<p ng-if="q.type == 'checkbox'">
<p ng-repeat-start="a in q.answers">1 {{q.type}}
<input type={{q.type}}>{{a.text}}</input><br/>
</p>
<p ng-repeat-end></p>
</p>
<p ng-if="q.type == 'radio'">
<p ng-repeat-start="a in q.answers">2 {{q.type}}
<input type={{q.type}}>{{a.text}}</input><br/>
</p>
<p ng-repeat-end></p>
</p>
</div>
<p ng-repeat-end></p>
The output shows the code is executing every if, as if they were both true. This produces duplicate checkoboxes/radio buttons.
1 checkbox Voice calling.
1 checkbox Text messaging.
1 checkbox Data access
2 checkbox Voice calling.
2 checkbox Text messaging.
2 checkbox Data access
It should look like this:
1 checkbox Voice calling.
1 checkbox Text messaging.
1 checkbox Data access
2 radio new question 1.
2 radio new question 2.
2 radio new question 3.
Your problem is nested p tag more details
<p>this
<p>will not work</p>
</p>
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
In that case ng-if directive will not evaluate properly. So if you use div or span instead of p then it should works
<div ng-repeat-start="q in questions">
<h3>{{q.text}}</h3>
<span ng-if="q.type == 'checkbox'">
<p ng-repeat-start="a in q.answers">1 {{q.type}}
<input type={{q.type}}>{{a.text}}<br/>
</p>
<p ng-repeat-end></p>
</span>
<span ng-if="q.type == 'radio'">
<p ng-repeat-start="a in q.answers">2 {{q.type}}
<input type={{q.type}}>{{a.text}}<br/>
</p>
<p ng-repeat-end></p>
</span>
</div>
<p ng-repeat-end></p>
see the Demo
I'm using the collapse feature of UI-Bootstrap (http://angular-ui.github.io/bootstrap/#/collapse) but when I use the collapse/toggle it loses the data and just returns "true".
Here is a Plunker to show my issue, http://plnkr.co/edit/e689Wureay8AMZQ9IIno?p=preview
A snippet from the code:
<div ng-repeat="name in names | filter:radioModel:true">
<span ng-model="namesList" ng-click="name = !name">Toggle collapse {{name.firstName}}</span>
<hr>
<div ng-show="name">
<div class="well well-large">{{name}} -</div>
</div>
That is because you are overwriting name in the ng-click here: ng-click="name = !name". That will make name true or false, depending on how many times ng-click was invoked.
What you want is to toggle a property on the model to collapse/uncollapse the following detail:
<div ng-repeat="name in names | filter:radioModel:true" >
<!-- change the property name.collapsed -->
<span ng-model="namesList" ng-click="name.collapsed = !name.collapsed">Toggle collapse {{name.firstName}}</span>
<hr>
<!-- use ng-hide to "collapse" -->
<div ng-hide="!!name.collapsed">
<div class="well well-large">{{name}} -</div>
</div>
</div>
Working demo: http://plnkr.co/edit/at7ceCYDXwWWlqUlKnkQ?p=preview