javascript - data - ¿Cómo pasar valor a ng-if después de ng-click?
ng-< onclick (8)
Propósito
Estoy tratando de que el administrador y el cliente se muestren en diferentes etapas, el administrador puede publicar los datos después de hacer clic en toggleShowDiv() , que permite al cliente ver los datos.
Pregunta
¿Cómo pasar !isAdmin() en ng-if ? Actualmente, solo estoy obteniendo isAdmin por defecto.
¿Es capaz de publicarlo en la tabla TD por TD (fila por fila)? No estoy seguro, estoy escribiendo el código correcto aquí.
Mi pensamiento
¿Puedo usar ng-if para cada TD = isAdmin() individual TD = isAdmin() o !isAdmin , y controlar mediante una función de clic?
$scope.showDiv = isAdmin();
$scope.toggleShowDiv = function (auction) {
var title = ''text.......'';
var text = ''are you sure?'';
ConfirmModal(title, text, function () {
$scope.showDiv = !isAdmin() ;
});
};
HTML
<div ng-if="showDiv">
<tbody class="auction-group" ng-repeat="a in foos">
<td ng-if="isAdmin()">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>
</div>
Actualizar
isAdmin() es solo una función que se pasa desde el backend.
function isAdmin() {
return !!($aScope.currentUser && $aScope.currentUser.isAdministrator);
}
Tenga en cuenta: la pregunta no es sobre la función isAdmin() , funciona bien. Lo que quiero hacer es usar una función de clic para mostrar y ocultar la fila de la tabla.
Bueno, creo que deberías usar alguna var que cambie de acuerdo si el usuario hace clic en $ scope.showTable = true / false. Pero no estoy completamente seguro de tu necesidad real.
Echa un vistazo a esto. Aquí tienes 2 usuarios en línea al mismo tiempo, dude1 (admin) y dude2 (non admin). Puede alternar la pantalla desde el lado del administrador para el lado no administrador al tener una llamada al back-end que verifica continuamente si la pantalla es válida o no. Para colocar un conmutador en las filas de la tabla, solo tiene que agregar ng-if a los elementos <tr> .
var app = angular.module(''app'', []);
app.controller("controller", function($scope) {
$scope.dude1 = {admin: true, name: [{name: ''A+'', country:''India'', publish: true}, {name: ''A'', country:''Unknown'', publish: true}]};
$scope.dude2 = {admin: false, name: [{name: ''A+'', country:''India'', publish: true}, {name: ''A'', country:''Unknown'', publish: true}]};
$scope.toggler = (index) => {
$scope.dude1.name[index].publish = !$scope.dude1.name[index].publish;
};
$scope.names = (dude) => {
return dude.name;
};
setInterval(() => {
/**
* Any backed function to get and repopulate the data.
* Update the value of publish from the server. I''m just using
* the other guys data. But you should fetch it from the server.
*/
$scope.dude2 = valfromServer();
// console.log($scope.dude2, $scope.dude1);
}, 2000);
var valfromServer = () => {
return {
admin: false,
name: $scope.dude1.name
};
};
$scope.publish = (dude, index) => {
return dude.admin || dude.name[index].publish;
};
$scope.isAdmin = (dude) => {
return dude.admin;
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
<span>Admin Panel</span>
<div>
<table style="width:40%">
<tr ng-repeat="x in names(dude1)" ng-if="publish(dude1, $index)">
<td>{{ x.name }}</td>
<td>{{ x.country }}</td>
<td>{{ $index }}</td>
<td><button ng-click="toggler($index)" ng-if="isAdmin(dude1)">Publish</button></td>
</tr>
</table>
</div>
<hr>
<span>Non admin panel</span>
<div>
<table style="width:40%">
<tr ng-repeat="x in names(dude2)" ng-if="publish(dude2, $index)">
<td>{{ x.name }}</td>
<td>{{ x.country }}</td>
<td>{{ $index }}</td>
<td><button ng-click="toggler($index)" ng-if="isAdmin(dude2)">Publish</button></td>
</tr>
</table>
</div>
</body>
</html>
En lugar de ng-if="showDiv" usa algo enlace ng-if="obj.showDiv"
En el controlador define $scope.obj = {};
El problema es que ng-if crea su propio alcance, por lo tanto, siempre pase datos como un objeto porque los objetos en JS se pasan por referencia.
Estoy confundido con tu pregunta, sugeriré algunos puntos, espero que te sirva de ayuda.
ng-ifes una directiva incorporada. Puedes usarlo en cualquier elemento DOM. Puede controlarlo usando un atributo o función, solo necesita pasar un atributoBooleana esta directiva. Por ejemplo:ng-if="showHideAttribute"ong-if="functionNameWhichReturnBoolean()"Ámbito: si está haciendo clic en el elemento aplicado botón / casilla de verificación / ng-clic está disponible en el mismo ámbito de aplicación de la directiva ng-if aplicada, entonces no hay problema. De lo contrario, debe usar el servicio u observadores (on /
rootScope/ broadcast) orootScopeentonces solo funcionará.Espero que esté recibiendo
isAdmin = true/falsede backend en su función. Por lo tanto, estoy pensando que este es el problema del alcance.
Lo que entiendo es: "Cuando el administrador desencadena alguna acción, es decir, un clic, el usuario debe poder ver esos datos / cambios".
Si este es el caso, considere lo siguiente:
- Estoy seguro de que esto no va a suceder en la misma máquina. El administrador utilizará la aplicación en su máquina desde donde realizará alguna acción, es decir, se activará ng-click y se cambiarán algunos datos en el servidor.
- Ahora habrá (n) número de usuarios que utilizan la aplicación desde sus máquinas. ¿Cómo conocerán el cambio que ha hecho el administrador?
- En tal escenario, cuando hay cambios en el servidor, el cliente (navegador) debe saber que utilizamos socket.io, que escucha los eventos del servidor y se actualiza cuando hay algunos cambios en el estado del servidor o podemos decir, cuando el administrador ha activado alguna acción, es decir, ng-click.
Déjeme saber si usted tiene cualquier pregunta.
Gracias
Puedes hacerlo
ng-if = "isAdmin == false"
Realmente me estás confundiendo , pero si lo entendí correctamente, ¿quieres algo como esto?
Lo primero es lo primero, ¿tu HTML es verdaderamente horrible, partes de tablas en divs? No hagas eso ...
En segundo lugar, no hackee kabout con el isAdmin para cambiar las cosas.
isAdmin solo debe usarse para verificar si un usuario es un administrador.
Sin embargo, puede crear otra variable que se ejemplifique con el mismo valor y usar esa para alternar cosas.
var app = angular.module(''plunker'', []);
app.controller(''MainCtrl'', function($scope) {
this.content = ''This is some unpublished content, only the admin can view, unless you/'ve now gone and publish it.'';
this.isPublished = false;
this.isAdmin = false;
});
/* Put your css in here */
textarea,
label,
button {
display: block;
margin: 15px 15px 0 0;
}
button {
display: inline-block;
}
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<div ng-app="plunker">
<div ng-controller="MainCtrl as $ctrl" ng-init="$ctrl.isAdmin=false">
<article>
<section class="content">
<section ng-if="$ctrl.isAdmin || $ctrl.isPublished">{{ $ctrl.content }}</section>
<section ng-if="!$ctrl.isAdmin && !$ctrl.isPublished"><pre>-- no published content found --</pre></section>
</section>
<section class="admin-only" ng-if="$ctrl.isAdmin">
<label><input type="checkbox" ng-model="$ctrl.isPublished"> publish article</label>
</section>
</article>
<hr />
<label><input type="checkbox" ng-model="$ctrl.isAdmin"> is admin</label>
</div>
</div>
editar:
Todavía me estás confundiendo, pero ¿esto se acerca más a lo que quieres / necesitas?
<div ng-if="showDiv == true || isAdmin == true">
<tbody class="auction-group" ng-repeat="a in foos">
<td ng-if="isAdmin == true">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>
</div>
Código JS Digamos primero que cualquiera que ingrese será cliente
$scope.showDiv = false;
$scope.isAdmin = false;
ahora, cuando llegue la respuesta desde el backend, verifique la respuesta y cambie el valor de $ scope.isAdmin en consecuencia.
if(response == admin){
$scope.isAdmin= true;
}else{
$scope.isAdmin = false;
}
Ahora en la función de casilla de verificación onclick
$scope.toggleShowDiv = function (auction) {
var title = ''text.......'';
var text = ''are you sure?'';
ConfirmModal(title, text, function () {
if($scope.showDiv == false){
$scope.showDiv = true;
}else{
$scope.showDiv = false;
}
});
};