Angular.js: so ändern Sie die div-Breite basierend auf Benutzereingaben
Ich habe ein input-Feld nimmt den Wert für die div-Breite.
Mit angular.js, Wie kann man ändern, div Breite abhängig von einer Benutzereingabe?
Ich habe folgenden code implementiert nachdem er diese Geige.http://jsfiddle.net/311chaos/vUUf4/4/
Markup:
<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols" ng-change="flush()"/>
<div getWidth rowHeight=cols ng-repeat="div in divs">{{$index+1}} aaaaaa</div>
controller.js
var grid = angular.module('gridApp', []);
grid.controller('control', ['$scope', function ($scope) {
/* code for repeating divs based on input*/
$scope.divs = new Array();
$scope.create=function(){ //function invoked on button's ng-click
var a = $scope.cols;
for(i=0;i<a;i++)
{
$scope.divs.push(a);
}
alert($scope.divs);
};
}]);
grid.directive('getWidth', function () {
return {
restrict: "A",
scope: {
"rowHeight": '='
},
link: function (scope, element) {
scope.$watch("rowHeight", function (value) {
console.log(scope.rowHeight);
$(element).css('width', scope.rowHeight + "px");
}, false);
}
}
});
function appCtrl($scope) {
$scope.cols = 150; //just using same input value to check if working
}
UPDATE
Mein oberstes Ziel ist es, Breite, div. Wenn ich Anrufe, inline-CSS, wie ich das erreichen, was ich will.
<div get-width row-height="{{cols}}" ng-repeat="div in divs" style="width:{{cols}}px">{{$index+1}} aaaaaa</div>
Aber das wäre nicht immer effizient, wenn die Anzahl der divs geht hoch. Also nochmal die Frage bleibt, wie dies zu tun ist über die Winkel-Skript?
InformationsquelleAutor Sujit | 2014-01-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden
ng-style="{width: cols + 'px'}"
statt Stil.link zu den docs: http://docs.angularjs.org/api/ng.directive:ngStyle
Schreiben Sie inline-Stile ist in der Regel nicht eine gute Praxis, aber in diesem Fall ist die einzige Sache, die getan werden kann, um die Größe des Elements. Als fro ng-Stil AFAIK noch hinzufügen style="" aber Sie können die Karte scope-variable zu, so dass Sie könnte so etwas wie ng-style="styles" und fügen Sie die Stile in der scope: $scope.styles = {width: etwas + 'px'}
{{cols}}
scheint nicht zu funktionieren in neueren Eckigen Versionen. Wenn Sie dieses problem haben, versuchen Sie(cols)
statt.InformationsquelleAutor Jon Snow
Haben Sie einen Fehler in yor Winkel-syntax. Sie verwenden Sollten,
Ebenfalls sollten Sie verwenden
attrs.$observe
statt$watch
.Funktionsfähige demo (aktualisiert): http://jsfiddle.net/nidzix/UKHyL/40/
Hast du richtig zählen angular-Bibliothek, controller und app-Namen?
Ja auf jeden Fall. Skript wird aufgerufen, richtig, sonst rest der code nicht funktioniert. Controller und app-Namen ist auch in Ordnung. Aber ich habe die Richtlinie nach der controller, ist das in Ordnung?
Ja, es ist egal. Geige ist vollständig transparent, so dass es keine versteckten code, einfach kopieren und einfügen, sollte funktionieren. Wenn Sie andere änderungen in Ihrem code können Sie auch Einfluss auf das Ergebnis.
Hast du es geschafft bis zum Ende?
InformationsquelleAutor nidzix