I am new to AngularJS and have some trouble understanding the concept of scope in Angular. I have read some posts on stackoverflow as well as online articles, which advise me to create a custom directive to create an isolate scope, but I am getting nowhere...
As for the project I'm working on, I am trying to make a button that when clicked, will trigger a textarea. However, because of ng-repeat, the textarea is triggered for all buttons while I click only one.
My .js file:
angular.module('myApp')
.controller('myCtrl', function ($scope, Question) {
scope.visible = false;
scope.toggle = function() {
scope.visible = !scope.visible;
};
.directive("myDirective", function () {
return {
scope: {
ngClick: '&',
ngShow: '&'
}
}
});
Here is my HTML file:
<ul>
<li ng-repeat="object in objectList">
<button type="text" myDirective ng-click="toggle()">Click</button>
<textarea myDirective ng-show="visible"></textarea>
</li>
</ul>
Angular is creating child (NOT isolated) scope when ng-repeating, try this out, when you ng-init a variable, it is only visible within that repeat div.
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]" ng-init="visible=false">
<button ng-click="visible=!visible">Toggle</button>
<h1 ng-show="visible">look at me!</h1>
</div>
Plunker
There is no need to use a directive. You need to use object in the foreach to refer each item in the loop.
Add visible to each object in objectList:
$scope.objectList = [
{ visible: false },
{ visible: false },
{ visible: false }
];
Then the toggle button will need to pass the object to toggle:
$scope.toggle = function (object) {
object.visible = !object.visible;
};
The ng-show will need to check object.visible and ng-click will need to pass the object:
<button type="text" ng-click="toggle(object)">Click</button>
<textarea ng-show="object.visible"></textarea>
Plunkr
Related
I'm new to vue.js, before this i'm using jquery or js for my project, i'm working on a project that require me to append HTML element dynamically on button click, and at the same time bind the input value to model, similar to:
$(".button").click(function() {
$("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});
But i need this in Vue.js ways.
Here is my code:
data() {
return {
programmeBanner: [],
dropzoneOptions: {
...
...
init: function () {
this.on("success", function(file, response) {
file.previewElement.id = response;
// this is the part that i want to append the html input into
// the .dz-preview is the target that i want to append
$(".dz-preview[id='"+response+"']").append("<input type='hidden' name='"+fileInputName+"[]' v-model='programmeBanner' class='"+fileInputName+"' value='"+response+"'/>");
});
},
...
Here is a sample that i want to achieve, this is in Jquery, i need it in Vue.js
https://jsfiddle.net/041xnfzu/
Hmm I think you're mixing all kinds of code here :)
First off, you shouldn't use jquery inside VueJS. I think that your setup is a little off. You shouldn't define a whole object with functions and event listeners in your vue data object.
That's what Vue components are for, define methods in your methods property and data in you data property.
Thanks to your jsfiddle example, I have this pure vuejs example for you on codepen: https://codepen.io/bergur/pen/vwRJVx
VueJS code:
new Vue({
el: '#demo',
name: 'Adding html',
data() {
return {
inputs: []
}
},
methods: {
addInput() {
this.inputs.push(this.inputs.length+1)
}
},
computed: {
buttonText() {
return this.showInput ? 'Hide input' : 'Show input'
}
}
})
HTML template
<div id="demo">
<button #click="addInput">Add input</button>
<div v-for="(input, index) in inputs">
<input name="data" v-model="inputs[index]" />
</div>
<p>
First value: {{ inputs[0] }}<br />
Second value: {{ inputs[1] }}
</p>
</div>
Here's a walkthrough of the code.
We create a data property called inputs, that is an array.
We create a method called addInput and all that does is to push a new item into the inputs array
In the template we loop with v-for through our inputs array and render a input for each item in our inputs data property.
We then use v-model to bind each input to its corresponding place in the inputs array.
You can try to change the input value and see that the template updates the value.
So input[0] holds the value for the first input, input[1] holds the value for the second input and so on.
If you want only one element to be appended to component, then you should use v-if
https://v2.vuejs.org/v2/guide/conditional.html#v-if
If you want to append multiple elements, like todo list, you should use v-for
https://v2.vuejs.org/v2/guide/#Conditionals-and-Loops
I want to bind an array (customLayers) and use it for ng-repeat.
I fill the array inside the kv.colorMap Object.
I have three directives using these technique. But the directive updates the binded array on view ONLY after pressing a functionless button (checkResult), which is inside this directive.
Directive Template Code:
...
<div class="createInfo colorExprContainer">
<div ng-repeat="layer in customLayers">{{layer.color}}</div>
</div>
<div class="buttonWrapper text-center">
<button class="btn" ng-click="checkResult()">Ergebnis prüfen</button>
</div>
...
Directive JavaScript Code:
app.directive('boolKv', function($parse, $timeout){
return {
restrict: 'E',
replace:true,
scope:true,
templateUrl: "directives/boolKV/boolKV.html",
link: function($scope, $element, $attr) {
...
var kv = new BAKV({target: cv[0].id, expr: expr});
$scope.customLayers = kv.colorMap.layers;
...
$scope.checkResult = function(){console.log("it works!");};
});
Does someone have an idea?
Thank you very much!
Thank you MirMasej!
You were right, I was calling it after render. Maybe because I've used the EaselJs Library for canvas. I wanted to get the update after click on a block inside this canvas.
I solved it by adding, if someone has a better idea I would try it:
kv.colorMap.onChangedLayer = function(layer) {
$timeout(function(){
$scope.$apply();
});
};
Im calling this onChangedLayer event after changing the data inside the colorMap object.
I'm trying to use a single "create" button that either opens a dialog or goes to a new page using ui-router, depending on the value of an object.
I'm not sure of the best way to accomplish this, I have something that seems to work, but I'm wondering if there's a better way. I'm currently using two buttons and an ng-if to hide the button I don't need at the time, but that seems messy to me.
Here's a very simple mock up of what I'm trying to do. Rather than actually opening a dialog or changing page content, I've just added alerts.
http://codepen.io/jwelker9/pen/QNPgyE?editors=1010
In short, I'm not sure how to get ui-sref and a dialog to play together on the same button.
HTML:
<div ng-controller = "lists-detail" ng-app="app">
<table class="listing">
<thead>
<tr>
<th>Item-Id:</th>
<th>Ordinal:</th>
<th>Type:</th>
<th>Content-Id:</th>
<th>
<button ng-if="!boolean"
class="button"
aria-label="Add list item"
ui-sref="site.lists">
Add New
</button>
<button ng-if="boolean"
class="button"
aria-label="Add list item"
ng-click="dialog()">
Add New
</button>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS:
var app = angular.module('app', []);
app.controller('lists-detail', function ($scope) {
//actual code looks like:
//This calls an API to determine if it is correct type or not
//If boolean is true, it should open a new dialog
//if(listType == 'Episode'){
$scope.boolean = false;
//}
$scope.goToNewPage = function() {
alert("NewPage");
}
$scope.dialog = function() {
alert("Open Dialog");
}
})
If I'm understanding your question correctly, you could just call a function when the value changes and make the decision in the function like this:
https://jsfiddle.net/tma739u9/
Angular
vm.boolean = false;
vm.watchBoolean = function() {
var decision = (!vm.boolean) ? newPage() : dialog();
}
function newPage() {
$location.path('/page');
}
function dialog() {
alert('Open dialog');
}
HTML
<input
type="checkbox"
ng-model="ctrl.boolean"
ng-click="ctrl.watchBoolean()"> Click Me
In your ng-click, you can use an Angular expression like this:
ng-click="boolean==true? dialog() : gotoNewPage()"
This is a shorthand way of saying this in Javascript:
if (boolean) {
dialog();
} else {
gotoNewPage();
}
I have a ng-repeat to loop my object value to view.
Then I want to have a button to add new blank element to the last of ng-repeat value.
How can I do this in angular?
My data is json object. I tried
In controller
$scope.objs = {'a': 'a', 'b':'b'};
In view
{{Object.keys(objs).length}};
But nothing show in view.
Update
<div ng-repeat="docstep in docs.docsteps" class="docstep">
{{docstep.text}}
</div>
Then I want to get the length of objects so I can .length + 1 in the button click
But I have no idea how to get objects length. Or is there any better idea?
Bind a click handler to the button using ng-click:
<div ng-repeat="docstep in docs.docsteps" class="docstep">
<input type="text" value="{{docstep.text}}">
</div>
<button ng-click="addNew()">Add another input</button>
When this button is clicked. It will add another blank input
<br>Which the new input will be docstep3
This is how your JS should look:
var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope){
$rootScope.docs = {
"docsteps" : {
"docstep1" : {
"text" : "a"
},
"docstep2" : {
"text" : "b"
}
}
}
var c = 2;
$rootScope.addNew = function(){
count++;
$rootScope.docs.docsteps["docstep"+count] = {"text":count}
}
});
NOTE: You should use ng-app to define work area for angular and use controllers to reside the models(docs) and define the behaviour of your view (addNew).
I took your ng-repeat and made it work. Notice I put your object in the $rootScope but you can apply the same object to any scope that your ng-repeat is in.
JS
var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope){
$rootScope.docs={docsteps:[{text:'A'},{text:'B'},{text:'C'}]};
});
JSFIDDLE: http://jsfiddle.net/mac1175/Snn9p/
I have a Durandal widget (hot towel template) named "selector" in App>durandal>widgets>selector
The code of controller.js of widget:
define(function (require) {
var widget = require('durandal/widget');
var selector = function (element, settings) {
settings.selectedTopLevel = ko.observable();
settings.showTopLevel = ko.observable(true);
this.settings = settings;
};
selector.prototype.enableSelect = function() {
this.settings.showTopLevel(true);
this.settings.selectedTopLevel(null);
};
selector.prototype.showSelect = function () {
var selected = this.settings.selectedTopLevel;
alert(this.selected.name().toString());
};
return selector;
});
The view.html of widget:
<span>
Click to enable
<span data-bind="visible: settings.showTopLevel">
<select data-bind="options: settings.items, optionsText: 'name', optionsCaption: 'Select...', value: settings.selectedTopLevel"></select>
</span>
<br/>
<span data-bind="foreach: settings.items">
<a href="#" data-bind="click: $parent.showSelect">
<span data-bind="text: name"></span>
</a>
</span>
The use of widget:
<div>
<h2>Widget Selector:</h2>
<div data-bind="widget: { kind: 'selector', items: $root.projects }"></div>
But I have some problems in function selector.prototype.showSelect in line var selected = this.settings.selectedTopLevel; the principal error is:
this.settings is undefined
The other problem appear in that line of html:
Click to enable
The function selector.prototype.enableSelect isn't call when I clicked in "Click to enable".
I am new in Durandal widget, please any help much appreciated!
It's a KO issue. You need to wrap those calls to $parent in a function in order to preserve the "this" context I believe.
Reposted from comment above to make easier to read:
I think the issue is these are not updating:
this.settings.showTopLevel(true);
this.settings.selectedTopLevel(null);
For some reason observables that are declared in durandal widgets don't enter the knockout stack or aren't bound to the view (not sure which one)...
Not sure why yet. To get knockout observables I had to declare any observables needed at the widget level at the parent viewmodel's level and pass it in using the settings.
Let me know if you get it to work!